React中点击Complete按钮后子组件状态未更新的问题

问题：点击Complete按钮后，Layout组件能打印出更新后的todo数据，但UI未同步更新，Is Complete字段始终显示False。

核心原因 #

React依赖状态引用的变化触发组件重渲染，你在updateTodo函数里违反了React状态不可变性原则：

1. let newtodo=todo;只是复制了原状态数组的引用，本质上还是同一个数组
2. 直接修改原数组内的对象属性todo[i].isComplete = true;，没有创建新的对象实例

这导致调用setTodo(todo)时，React检测到数组引用未发生变化，判定状态无更新，因此不会触发Layout组件的重渲染，即便对象属性值已经被修改。

修复方案 #

修改updateTodo函数，严格遵循状态不可变性：生成新数组，对需要更新的项创建新对象，其余项保留原引用即可。

修改后的App.js代码 #

import './App.css';
import Layout from './pages/layout';
import React, { useRef, useState } from 'react';
function App() {
  const [todo, setTodo] = useState([]);
  const titleRef = useRef();
  const todoRef = useRef();
  const refid = useRef(0);
  console.log("render in app", refid);
  
  function Addtodo() {
    setTodo([...todo, { id: refid.current++, title: titleRef.current.value, todo: todoRef.current.value, isComplete: false }]);
  }
  
  function deleteTodo(title) {
    setTodo(todo.filter(filterItem => filterItem.title !== title));
  }
  
  function updateTodo(title) {
    // 用map生成新数组，匹配到目标项时返回新对象
    const newTodo = todo.map(item => {
      if (item.title === title && !item.isComplete) {
        return {
          ...item,
          isComplete: true,
          todo: item.todo + '1'
        };
      }
      return item;
    });
    setTodo(newTodo);
  }
  
  return (
    <div className="App">
      Title
      <input ref={titleRef} id="title" type="text" />
      To Do
      <input ref={todoRef} id="todo" type="text" />
      <button type="button" onClick={Addtodo}>Add</button>
      <Layout todoArray={todo} deleteTodo={deleteTodo} updateTodo={updateTodo} />
    </div>
  );
}

export default App;

额外建议 #

目前用title作为todo项的唯一标识存在风险，如果出现重复title，会导致更新/删除操作出错。建议改用每个todo项的id作为标识，比如修改Layout中按钮的name属性为todos.id，同时更新deleteTodo和updateTodo函数的参数为id，确保操作精准性。

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