Javascript 切换布尔值

为什么这不起作用？如果我

console.log

完成的

todo.completed

，它会更改，但会再次更改为原始值

handleChange（id）{
this.setState（prevState=>{
const updatedTodos=prevState.todos.map（todo=>{
if（todo.id==id）{
todo.completed=！todo.completed
}
return todo//将todo项放入同一索引中的updatedTodos数组中
})
返回{
待办事项：更新的待办事项
}
})
}

您正在直接变异todo对象，这可能会导致奇怪的行为

您将希望返回新的todo，而不是在您的条件下更改todo

返回{…todo，已完成：！todo.completed}

---

此处的更多详细信息

这是因为您正在对对象进行变异，这会导致不良反应并导致意外结果

handleChange(id) {
    this.setState(prevState => {
    const updatedTodos = prevState.todos.map(todo => {
        if (todo.id === id) {
            // todo.completed = !todo.completed
            //mutating, when mutating react doesn't understand it's a new entity

            //you have to create a new object based on the todo and change the props as you want
            return {
                ...todo,
                completed: !todo.completed
            }
        }
        return todo // Puts todo item in updatedTodos array in the same index
    })
    return {
        todos: updatedTodos
    }
    })
}

---

@worknovel如果您不熟悉spread operator，请在此处阅读，当使用react进行开发时，这将非常有用