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

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 的布尔值，我通过以下方式更新状态来做到这一点；

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 语句显示两次），这将布尔值设置回其原始值。有人可以启发我为什么会这样吗？以及如何解决这个问题？提前致谢

标签： javascriptreactjs

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
    }    
    })    
}