如何在映射对象数组状态时重新渲染React组件

你的问题核心在于直接修改了React state的引用，同时索引获取逻辑存在错误，导致React无法检测到状态变化，组件也就不会触发重新渲染。让我一步步拆解问题并给出修复方案：

问题1：错误的索引获取逻辑 #

你用了const index = todos.find(todo => todo.name == name)，但find()方法返回的是匹配的对象本身，并非它在数组中的索引。这就导致后续tempTodos[index].done = true是把对象当作索引来使用，完全是错误操作，根本没修改到目标元素。

问题2：直接修改state的引用 #

let tempTodos = todos;这行代码只是把原数组的引用赋值给了tempTodos，并没有创建新的数组。React的state更新基于浅比较规则——只有当state的引用发生变化时，才会触发组件重渲染。你修改了数组内部的元素，但数组本身的引用没变，所以React会认为状态没有变化，不会重新渲染组件。

修复后的完整代码 #

const App = (props) => { 
  const [todos, setTodos] = React.useState([ 
    {name: 'A', done: false}, 
    {name: 'B', done: false}, 
    {name: 'C', done: false}, 
  ]) 

  const handleClick = (name) => { 
    // 1. 正确获取目标元素在数组中的索引
    const index = todos.findIndex(todo => todo.name === name);
    // 2. 用展开语法创建原数组的全新副本
    const tempTodos = [...todos];
    // 3. 为目标元素创建新对象副本并修改状态（保持不可变性）
    tempTodos[index] = {...tempTodos[index], done: true};
    // 4. 用新数组更新state
    setTodos(tempTodos);
  } 

  return ( 
    <div> 
      <h1>Hello, world!</h1> 
      <div> 
        {todos.map(todo => { 
          // key只需保证唯一稳定即可，无需随状态变化
          return todo.done ? (
            <div key={todo.name}>{todo.name} : done</div>
          ) : (
            <div onClick={() => handleClick(todo.name)} key={todo.name}>{todo.name} : not done</div>
          )
        })} 
      </div> 
    </div> 
  ) 
}

关键知识点：React状态的不可变性原则 #

React要求我们永远不要直接修改state中的对象或数组，必须通过创建新的副本（比如用展开语法...、slice()、map()等方法）来更新状态，这样React才能检测到引用变化，触发组件的重新渲染。

另外补充一个小优化：你之前用'done' + todo.name和'notdone' + todo.name作为key其实没必要。key的作用是帮助React识别列表元素的身份，只要保证每个元素的key唯一且稳定就可以，直接用todo.name就足够了（因为你的每个todo的name都是唯一的）。

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