React setState 不更新 state

Question

我是 React 的新手，在使用setState方法更改状态时遇到了一些麻烦。 单击复选框时，我正在尝试更新 ToDo 项目的 state。 当我调试handleChange方法时，它会暂时更改项目的 state。 不幸的是，最后的 state 就像开头一样（复选框的状态永远不会改变）。 有人知道问题出在哪里吗？

class App extends React.Component {
constructor() {
    super()
    this.state = {
        todos: todosData,
    }
    this.handleChange = this.handleChange.bind(this)
  }


handleChange(id){
    this.setState(prevState => {
        const updatedTodos = prevState.todos.map(todo => {
             if (todo.id === id) {
                  todo.completed = !todo.completed
             }
             return todo
        })
        return {
            todos: updatedTodos
        }
      })
    }


render()  {
    const todoItems = this.state.todos.map(item => <ToDoItem key={item.id} todoItem={item} 
    handleChange={this.handleChange}/>) 

  return (
       <div className="App">
         {todoItems}
       </div>
   );
}

}

export default App;

这是我的 ToDoItem 组件：

import React from 'react'

function ToDoItem(props){
    return (
        <div className = "todo-list">
            <div className = "todo-item">
                <input type="checkbox" 
                    checked={props.todoItem.completed} 
                    onChange = {() => props.handleChange(props.todoItem.id)}/>
                <p>{props.todoItem.text}</p>
            </div>
        </div>
    )
}

export default ToDoItem

Answer 1

只需使用此处理程序，让我知道是否有效。

handleChange(id){
    const list = this.state.todos.slice();
    const index = list.findIndex(o => o.id === id);
    list[index].completed = !list[index].completed;
    this.setState({ todos: list });
}

Answer 2

我认为问题出在这里：

   handleChange(id){
     this.setState(prevState => {
        const updatedTodos = prevState.todos.map(todo => {
           if (todo.id === id) {
               todo.completed = !todo.completed
           }
           return { ...todo }; // need to return a new object
        })
        return {
            todos: updatedTodos
        }
      })
    }

todo是对象和事件，如果 todo 每次都被设置为新的todos ，它的项目引用相同的 object，并且它被ToDoItem使用。