如何在第一次执行时多次调用函数而不中断

Question

我有一个函数，可以将子任务的状态更改为true&lt-&gt；false。单击主任务时，其子任务状态应变为true。当我在循环中运行这个函数时，它在第一次迭代后就会中断。如何更改状态为false的每个子任务的状态。

我的功能是

const changeSubtaskStatus = id => {
axios.patch(`/subtaskStatus/${id}`)
.then(res=>{
setSubTodos([...subTodos].map(ST=>{
if(ST.id===id){
return{
...ST,
status: !ST.status
}
}else{
return ST;
}
}));
}).catch(err=>console.log(err.message))
}

我的EventListener在这里

const onTaskCheck = id => e =>{
changeTaskStatus(id);
const subTasks = subTodos.filter(ST=>ST.taskId===id);
subTasks.map(ST=>{
if(ST.status===false){
changeSubtaskStatus(ST.id);
}
}) 
}

changeSubtaskStatus适用于subTasks数组的第一个对象并中断。请告诉我这里的错误。提前感谢

Answer 1

当您在这样的循环中对多个状态更新进行排队时，您应该真正使用一个功能状态更新，这样每个更新都会使用前一个状态，而不是创建回调的渲染周期中的状态。问题是回调在渲染周期中调用的状态的javascript外壳。

const changeSubtaskStatus = (id) => {
axios
.patch(`/subtaskStatus/${id}`)
.then((res) => {
setSubTodos((subTodos) =>    // <-- previous state
subTodos.map((ST) =>       // <-- shallow copy array
ST.id === id
? {
...ST,             // <-- shallow copy ST object
status: !ST.status // <-- update property
}
: ST
)
);
})
.catch((err) => console.log(err.message));
};