如何使用useState单独更新对象数组中每个对象的cost值？

你之前的写法存在问题：previous是数组而非单个对象，直接展开数组并添加cost属性只会把数组转成对象，完全不符合需求。正确的做法是通过遍历数组，对目标对象创建副本并修改属性，同时保持其他对象不变，这才符合React状态不可变的要求。

下面分几种常见场景给出具体实现：

场景1：根据索引更新特定对象的cost #

如果知道要更新的对象在数组中的索引，用map遍历数组，匹配到目标索引时返回新对象（展开原对象并替换cost），其他对象直接返回：

const updateCostByIndex = (index, newCost) => {
  setArray1(prevArray => 
    prevArray.map((item, idx) => 
      idx === index ? {...item, cost: newCost} : item
    )
  );
};

// 调用示例：更新第0个对象的cost为1500
updateCostByIndex(0, 1500);

场景2：根据对象属性（比如name）更新对应的cost #

如果不知道索引，只知道要更新的对象的标识属性（比如name），可以通过属性匹配来定位：

const updateCostByName = (targetName, newCost) => {
  setArray1(prevArray => 
    prevArray.map(item => 
      item.name === targetName ? {...item, cost: newCost} : item
    )
  );
};

// 调用示例：更新name为"secondname"的对象cost为2500
updateCostByName("secondname", 2500);

场景3：批量更新所有对象的cost #

如果需要给每个对象的cost统一修改（比如批量增加数值、设置统一值）：

// 示例1：给所有对象的cost加100
const incrementAllCosts = () => {
  setArray1(prevArray => 
    prevArray.map(item => ({...item, cost: item.cost + 100}))
  );
};

// 示例2：把所有对象的cost设置为同一个值
const setAllCosts = (newCost) => {
  setArray1(prevArray => 
    prevArray.map(item => ({...item, cost: newCost}))
  );
};

核心思路总结：永远不直接修改原数组或原对象，而是通过map生成新数组，对需要修改的对象创建浅副本并更新属性，这样React才能检测到状态变化并触发重新渲染。

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