javascript - map() 作为 React 中 setState() 的回调，奇怪地运行条件两次

Question

我正在将对象数组加载到组件的状态中。这是数组的内容

const toDoData = [
    {
        id:1,
        task:"Take out trash",
        completed : false
    },
    {
        id:2,
        task:"Wash the dishes",
        completed : true
    },
    {
        id:3,
        task:"Do groceries",
        completed : false
    },

我将其加载到状态中；

this.state={
     data:toDoData
 }

我想通过单击按钮来更改 object.completed 的 bool 值，并通过以下方式更新状态来完成此操作；

changeStatus(id){


        this.setState(prev=>{

            const updatedtodo=prev.todo.map(todo=>{
                if(todo.id==id){
                    todo.completed = ! todo.completed
                    console.log(todo.completed)
                }
                return todo
            })

        return{
            todo:updatedtodo
        }    
        })    
    }

但是由于某种原因，其中的条件语句最终运行了两次(console.log 语句显示了两次)，这将 bool 值设置回其原始值。有人可以告诉我这是为什么吗？以及如何解决这个问题？提前致谢

Answer 1

changeStatus(id){


    this.setState(prev=>{
        const clonePrev = {...prev};
        const updatedtodo=clonePrev.todo.map(todo=>{
            if(todo.id==id){
                todo.completed = ! todo.completed
                console.log(todo.completed)
            }
            return todo
        })

    return{
        todo:updatedtodo
    }    
    })    
}