Javascript / 反应 —.map 无法正常工作

Question

taking a react course, we are making a simple To Do list using setState. I was trying to have the value of a boolean change on an onChange event. I have gotten stuck.

I have an array of objects,

array Definition:

toDoData = [
    {
        id: 1,
        task: "Do laundry",
        completed: false
    },
    {
        id: 2,
        task: "Write essay",
        completed: false
    },
    {
        id: 3,
        task: "Do Homework",
        completed: true
    }

]

For the sake of simplicity, I am trying to map through the array and create a new array with the completed attribute being opposite of what it previously was.

 let updatedTodos = this.state.todos.map(todo => {
        todo.completed = !todo.completed
        return todo
      })
 
 console.log(updatedTodos)

When I print to the console, the values of completed are not changing.

Answer 1

Try:

let updatedTodos = this.state.todos.map(todo => ({ ...todo, completed: !todo.completed }));
console.log(updatedTodos);