React JS中checkbox未随数据变更，所有日期对应checkbox值一致问题

问题根因 #

• 你使用了非受控的defaultChecked属性控制checkbox选中状态，该属性仅在组件首次挂载渲染时生效，后续切换日期触发的重渲染不会更新该属性的值，因此所有日期的checkbox都会保留首次渲染的状态，无法同步对应日期的completed字段。
• 若切换日期时你是直接修改this.state.items的引用而非通过setState触发正确的状态更新，也会导致渲染内容无法同步最新日期的数据。

修复方案 #

1. 将checkbox的defaultChecked替换为受控属性checked，直接绑定subModule.completed的值，确保每次重渲染都会读取最新的状态值：

<input
  type="checkbox"
  data-id={subModule.id}
  onChange={(e) =>
    this.handleCheckClick(e, "items", subModule.id) // 这里建议把索引替换为subModule.id，避免数据顺序变更时操作错位
  }
  checked={subModule.completed}
/>

2. 调整dateHandler逻辑，切换日期时，从全量日期数据中取出当前选中日期对应的items数据，调用this.setState({items: 对应日期的items数组})触发重渲染，确保state中的items始终对应当前选中日期的数据。
3. 调整handleCheckClick逻辑，修改completed状态时，要同步更新当前选中日期对应的数据存储中的值，避免切换日期后修改的状态丢失。

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