在React中使用useState修改对象数组单个值的方法

你完全猜对了问题根源！那行错误的代码setPeople(people[0].name = 'Frank')犯了两个关键问题：

1. 直接修改了原状态对象：React要求我们不能直接mutate（修改）状态里的数组或对象，这会破坏状态的不可变性，导致组件无法正确触发重渲染。
2. 返回值不是数组：people[0].name = 'Frank'这个表达式的返回值是字符串'Frank'，所以setPeople会把你的people状态从数组改成字符串，之后调用people.map()自然就会抛出map is not a function的错误——字符串可没有map方法呀！

正确的做法：创建新数组，保持状态不可变性 #

React状态更新必须返回新的引用，我们可以通过以下两种常用方式实现：

方式1：展开运算符+对象拷贝（适合精准修改单个元素）

<button 
  type="button" 
  className="btn" 
  onClick={() => {
    // 使用函数式更新，确保拿到最新的状态值
    setPeople(prevPeople => {
      // 先拷贝原数组，避免修改原状态
      const updatedPeople = [...prevPeople];
      // 拷贝第一个对象并修改name属性，不直接修改原对象
      updatedPeople[0] = {...updatedPeople[0], name: 'Frank'};
      return updatedPeople;
    });
  }}
>
  修改第一个名字为Frank
</button>

方式2：使用map方法（适合批量或条件修改）

如果之后需要根据索引或其他条件修改元素，用map会更灵活：

<button 
  type="button" 
  className="btn" 
  onClick={() => {
    setPeople(prevPeople => 
      prevPeople.map((person, index) => {
        // 只修改第一个元素的name，其他元素保持不变
        if (index === 0) {
          return {...person, name: 'Frank'};
        }
        return person;
      })
    );
  }}
>
  修改第一个名字为Frank
</button>

关键提醒：为什么用prevPeople？ #

这里用了函数式更新setPeople(prevPeople => ...)而不是直接用people，是因为React的状态更新是异步的。如果你的新状态依赖于之前的状态，用函数式更新能确保你拿到的是最新的状态值，避免出现状态不同步的问题。

内容的提问来源于stack exchange，提问作者matteo-g