如何使用useState钩子更新数组中的多个元素？

React状态是不可变的，更新数组时必须创建新数组/新对象，不能直接修改原状态里的元素。针对你的需求，正确的做法是通过map遍历旧数组，为每个元素生成新对象，再用函数式更新替换原状态。

具体实现代码 #

假设parseIngredient函数接收raw字符串后，返回包含ingredient（对应name）、unit、quantity的对象，你可以这样写：

// 批量解析并更新配料状态
const batchUpdateIngredients = () => {
  setModalIngredients(prevIngredients => 
    prevIngredients.map(item => {
      // 解析当前配料的raw字段
      const { ingredient: parsedName, unit: parsedUnit, quantity: parsedQuantity } = parseIngredient(item.raw);
      // 返回新对象：复制原字段 + 覆盖解析后的字段
      return {
        ...item,
        name: parsedName,
        unit: parsedUnit,
        quantity: parsedQuantity
      };
    })
  );
};

关键细节说明 #

• 函数式更新：用prevIngredients作为参数，确保拿到的是最新的状态值，避免因状态异步更新导致的错误。
• 不可变更新：每个元素都返回新对象（通过...item复制原属性），而不是直接修改原对象。这样React才能检测到状态变化，触发组件重新渲染。
• 扩展运算符的作用：既保留了原元素的raw字段，又替换了解析后的name/unit/quantity，不会丢失原有数据。

额外提示 #

如果parseIngredient可能返回空值或解析失败，可以加个兜底逻辑，比如：

return {
  ...item,
  name: parsedName ?? item.name,
  unit: parsedUnit ?? item.unit,
  quantity: parsedQuantity ?? item.quantity
};

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