我正在嘗試執行狀態更改，然后我想發出 API 請求。但是由于 useState 是異步的，所以我不能這樣做。我嘗試使用useEffect()鉤子，但無法找到更改的確切陣列元素。
在toggleCompleted()我得到了舊值，updatedTask因為setTasks是異步的。
應用程式.js
import { useState, useEffect } from 'react'
const App = () => {
const [tasks, setTasks] = useState([])
const toggleCompleted = id => {
setTasks(
tasks.map(task => {
return task.id === id
? { ...task, isCompleted: !task.isCompleted }
: task
})
)
// This will get the old value
const updatedTask = tasks.find(task => task.id === id)
// PUT request here
fetch(`${api_url}/tasks/${id}`, {
method: 'PUT',
body: JSON.stringify(updatedTask)
})
}
}
export default App
我也嘗試使用useEffect鉤子，但我得到的是整個tasks陣列而不是更新的單個任務，所以我不能用它來PUT向我的后端 API 發出請求。
useEffect(() => {
// unable to get the exact one task that was updated
}, [tasks])
uj5u.com熱心網友回復：
我最終將我的代碼重構到我第一次獲取和更新元素的位置，該元素既用于更新狀態，也用于進行 API 呼叫。
const toggleReminder = id => {
let updatedTask = tasks.find(task => task.id === id)
updatedTask.isCompleted = !updatedTask.isCompleted
setTasks(
tasks.map(task => {
return task.id === id
? updatedTask
: task
})
)
fetch(`${api_url}/tasks/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedTask)
})
}
uj5u.com熱心網友回復：
為什么不這樣做：
import { useState, useEffect } from 'react'
const App = () => {
const [tasks, setTasks] = useState([])
const toggleCompleted = id => {
let updatedTask = tasks.filter(task => task.id === id)
updatedTask.isCompleted = !updatedTask.isCompleted
// PUT request here
fetch(`${api_url}/tasks/${id}`, {
method: 'PUT',
body: JSON.stringify(updatedTask)
})
setState(tasks.map(task => task.id === id ? updatedTask : task))
}
}
export default App
這應該可以解決您的問題。
基本上，我們捕獲我們想要更新的任務，隨心所欲地操作它，然后最終設定狀態。
uj5u.com熱心網友回復：
試試這個
import { useState, useEffect } from 'react'
const App = () => {
const [tasks, setTasks] = useState([])
const toggleCompleted = async (id) => {
const currentTask = tasks.find(task => task.id === id);
const updatedTask = {...currentTask, isCompleted: !currentTask.isCompleted};
await fetch(`${api_url}/tasks/${id}`, {
method: 'PUT',
body: JSON.stringify(updatedTask)
});
setTasks(tasks.map(task => task.id === id?updatedTask :task));
}
}
export default App
您可以使用普通函式而不是 async / await 并將 setTasks 放入 .then 但我認為它更簡單。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450489.html
標籤：javascript 反应