使用useState更新数组内对象状态，Checkbox未即时禁用问题求助

数据老陈

2026-7-2

Chakra UI Todo应用Checkbox勾选后未即时禁用的问题排查与解决

问题根源

你遇到的核心问题是React的useState状态更新依赖引用变化：你的updateCheck函数直接修改了原数组中的对象，没有创建新的数组/对象引用，导致React无法检测到状态变化，因此Checkbox的isDisabled属性没有即时更新。

而输入框输入时会触发对应状态的更新，迫使组件重新渲染，此时组件才会读取todoList的最新值，已勾选Todo的complete字段已经变为true，所以Checkbox才会显示禁用状态。

错误写法示例（推测你的代码）

如果你的updateCheck是类似下面的写法，就会导致这个问题：

const updateCheck = (id) => {
  // 直接引用原数组，未创建新数组
  const updatedTodos = todoList;
  const targetTodo = updatedTodos.find(todo => todo.id === id);
  // 直接修改原对象的属性
  targetTodo.complete = true;
  setTodoList(updatedTodos);
}

这种写法里，updatedTodos和原todoList是同一个数组引用，修改数组内的对象也没有改变数组本身的引用，React做浅比较时会认为状态没有变化，不会触发组件重新渲染。

正确解决方案

修改updateCheck函数，通过创建新数组和新对象来更新状态，确保React能检测到引用变化：

const updateCheck = (id) => {
  // 使用函数式更新，确保拿到最新的状态值
  setTodoList(prevTodos => 
    prevTodos.map(todo => {
      // 找到目标Todo，返回新对象（扩展运算符复制原属性，覆盖complete字段）
      if (todo.id === id) {
        return {...todo, complete: true};
      }
      return todo;
    })
  );
}

这里的关键细节：