[英]Unable to set previousCode state using useState hook in React
[英]Unable to get the updated state when using React useState hook
我正在尝试执行 state 更改,之后我想发出 API 请求。 但是由于 useState 是异步的,我不能那样做。 我尝试使用useEffect()
挂钩,但无法找到已更改的确切数组元素。
在toggleCompleted()
中,我得到了setTasks
updatedTask
异步的。
应用程序.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
数组,而不是更新的单个任务,因此我无法使用它向我的后端 API 发出PUT
请求。
useEffect(() => {
// unable to get the exact one task that was updated
}, [tasks])
为什么不这样做:
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
这应该可以解决您的问题。
基本上,我们捕获要更新的任务,根据需要对其进行操作,然后最后设置 state。
我最终将我的代码重构到我第一次获取和更新用于更新 state 和进行 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)
})
}
试试这个
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
您可以使用普通的 function 而不是 async / await 并将 setTasks 放入。然后,但我认为它更简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.