如何在React状态数组中更新指定索引的元素值？

你当前的写法有两个问题：一是直接修改了原状态数组（total[option] += price属于对原数组的突变，违反React状态不可变的原则）；二是setTotal传入的是单个数值而非新数组，会导致状态类型错误。要正确更新数组状态，必须创建原数组的副本，修改指定索引的元素后再传入setTotal，以下是两种可靠的实现方式：

方式一：使用扩展运算符创建副本 #

const addToTotal = (price) => {
  // 用扩展运算符复制原数组，避免修改原状态
  const newTotal = [...total];
  // 递增指定索引的元素
  newTotal[option] += price;
  // 更新状态
  setTotal(newTotal);
};

方式二：使用函数式更新+Array.map（更推荐） #

当新状态依赖于前一次状态时，函数式更新能避免闭包导致的状态不一致问题，结合map生成新数组更简洁：

const addToTotal = (price) => {
  setTotal(prevTotal => 
    prevTotal.map((item, index) => 
      index === option ? item + price : item
    )
  );
};

示例验证 #

假设当前option = 0，调用addToTotal(1)后，状态数组会更新为[1, 0, 0]；如果option = 1，调用后则会得到[0, 1, 0]，完全符合你要的递增指定位置数值的需求。

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