React项目中setState调用后状态未更新，该如何修复？

解答 #

代码的核心问题是违反了React状态不可变的更新规则：你在handleChange方法中直接修改了原state中存储的todo对象，React做状态浅比对时检测不到变更，因此不会触发组件重渲染，界面自然不会更新。

只需要修改App.js中的handleChange方法，匹配到对应id的todo项时返回一个全新的对象即可，修改后代码如下：

handleChange(id) {
  this.setState(prevState => {
    console.log("PrevState Start ", prevState.todos )
    const updatedTodos = prevState.todos.map(todo => {
      if (todo.id === id) {
        // 拷贝原对象所有属性，仅修改completed字段，返回全新的对象
        return {
          ...todo,
          completed: !todo.completed
        }
      }
      return todo
    })

    return {
      todos: updatedTodos
    }
  })

  console.log("Changed", id)
}

你原来的写法直接对todo.completed赋值，修改的是prevState里的原始对象引用，虽然map返回了新数组，但数组内的对象引用和原state完全一致，React会认为状态没有发生变化，所以不会更新界面。

内容的提问来源于stack exchange，提问作者Kehinde Jejelaye