React中使用useState钩子更新数组对象单个属性的问题

嘿，我明白你现在卡在哪了！直接修改todo.isComplete虽然表面上能看到状态变化，但这是React的反模式——你直接篡改了原状态对象，没有通过setTodos触发组件重渲染，这种修改不仅不可靠，还会导致React无法正确追踪状态变化。当你尝试加入setTodos时报错，核心原因是你没遵循React的不可变状态原则，没有创建新的状态副本。

问题到底出在哪？ #

你的completeHandler里直接遍历原todos数组并修改对象属性：

todos.map((todo) => todo.id === id ? console.log((todo.isComplete = !todo.isComplete)) : "" );

这种方式直接改变了原状态中的对象，数组的引用并没有发生变化，React无法感知到状态更新；就算你把这个map结果传给setTodos，本质还是在操作原对象，不符合React的状态更新规则。

正确的写法 #

你需要创建一个全新的数组，对于要修改的todo，返回一个新的对象（保留原属性，只修改isComplete），其他todo保持原样。推荐使用函数式更新（因为新状态依赖旧状态），这样能避免闭包导致的状态过期问题：

const completeHandler = (id) => {
  setTodos(prevTodos => {
    return prevTodos.map(todo => {
      if (todo.id === id) {
        // 返回新对象，不修改原状态对象
        return { ...todo, isComplete: !todo.isComplete };
      }
      return todo;
    });
  });
};

为什么要这么写？ #

• 不可变状态：React要求状态更新必须返回新的引用，不能直接修改原状态。通过{ ...todo, isComplete: !todo.isComplete }创建新对象，保证了原状态不被篡改，React能准确检测到状态变化并触发重渲染。
• 函数式更新：当新状态依赖于之前的状态时，使用setTodos(prevTodos => ...)可以确保拿到的是最新的状态值，避免因为闭包导致的旧状态问题。

修改后的完整代码片段 #

把你的completeHandler替换成上面的版本后，整个组件的相关部分如下：

const [todos, setTodos] = useState([]);
const [input, setInput] = useState("");

const addTodoHandler = (e) => {
  e.preventDefault();
  if (input.length < 2) return;
  setTodos([...todos, { id: Date.now(), text: input, isComplete: false }]);
  setInput("");
};

const removeHandler = (id) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

// 修正后的completeHandler
const completeHandler = (id) => {
  setTodos(prevTodos => 
    prevTodos.map(todo => 
      todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo
    )
  );
};

// 渲染部分保持不变
<div className="todolist">
  {todos.map((todo) => (
    <Todo 
      key={todo.id} 
      id={todo.id} 
      text={todo.text} 
      removeHandler={removeHandler} 
      completeHandler={completeHandler} 
      isComplete={todo.isComplete} 
    />
  ))}
</div>

这样修改后，点击完成按钮时，setTodos会正确更新状态，触发组件重渲染，你的Todo组件也能接收到最新的isComplete属性了！

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