React复选框state值变化但勾选状态不更新，是什么原因？

核心根因 #

Todo子组件将父组件传入的属性值拷贝到了自身state中，而组件构造函数仅在首次挂载时执行一次，后续父组件传入的最新属性不会同步到子组件state，因此复选框绑定的checked值永远是初始化时的状态，无法跟随父组件更新。

最优修复方案 #

直接删除Todo组件自身维护的冗余状态，所有渲染数据直接读取父组件传入的props即可，修改后的bob-Todos.js代码如下：

class Todo extends React.Component {
  render() {
    console.log("In TODO Render");
    const { id, text, completed } = this.props.data;
    return (
      <div>
        <p>
          <input
            type="checkbox"
            onChange={() => {
              this.props.OnChange(id);
            }}
            checked={completed}
          />
          {text}
        </p>
      </div>
    );
  }
}

export default Todo;

可选优化点 #

父组件OnChange方法中直接修改原数组元素属性的写法不符合React不可变数据规范，建议调整为返回新对象的写法，避免潜在的状态异常：

OnChange(myId) {
  this.setState((prev) => {
    let updatedTodos = prev.data.map((todo) => {
      if (todo.id === myId) {
        return {...todo, completed: !todo.completed};
      }
      return todo;
    });
    return { data: updatedTodos };
  });
}

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