React中如何使用setState更新嵌套对象内数组项的复选框勾选状态

问题核心原因 #

你的代码存在两个典型错误：

• 状态更新时结构不匹配：初始todoList是包含foundation、discovery两个分类的嵌套对象，你当前更新时直接将处理后的steps数组传入setTodoList，直接覆盖了原有完整结构，导致状态异常。
• 复选框使用了非受控属性：defaultChecked只会在组件首次渲染时生效，后续状态更新不会同步修改勾选状态，需要换成受控属性checked。

修正方案 #

1. 修改状态更新方法 #

嵌套状态更新需要保证每一层都做不可变拷贝，避免直接修改原状态，推荐使用函数式更新保证拿到最新的状态值：

const updateCheckFoundation = ({isDone, key}) => {
  setTodoList(prevTodoList => {
    // 逐层拷贝，只修改需要更新的字段
    return {
      ...prevTodoList, // 保留discovery等其他分类的所有数据
      foundation: {
        ...prevTodoList.foundation, // 保留foundation下除steps外的其他属性
        steps: prevTodoList.foundation.steps.map(todo => 
          todo.key === key ? {...todo, isDone} : todo
        )
      }
    }
  })
}

2. 修改复选框属性 #

将渲染代码中的defaultChecked改为受控属性checked，保证视图和状态完全同步：

<input 
  type="checkbox" 
  checked={item.isDone} // 替换原defaultChecked
  onClick={(event)=> updateCheckFoundation({
      isDone:event.target.checked, 
      key:item.key
  })}
/>

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