React：如何更新指定id发票中item_amounts内的processing对象状态？

我定义了一个名为invoices的React状态，其结构为对象数组，具体代码如下：

const [invoices, setInvoices] = useState([
  {
    id: 123,
    tag_number: "",
    item_amounts: [
      { item: "processing", amount: 159 },
      { item: "shipping", amount: 10 },
    ],
    complete: false,
    dropoff_id: "",
    customer_id: "",
    picked_up: false,
  },
  {
    id: 124,
    tag_number: "",
    item_amounts: [
      { item: "processing", amount: 169 },
      { item: "shipping", amount: 20 },
    ],
    complete: false,
    dropoff_id: "",
    customer_id: "",
    picked_up: false,
  }
]);

我已经掌握了如何更新invoices数组中单个对象的某个属性值，示例代码如下：

setInvoices(
  invoices.map((invoice) => {
    if (invoice.id === id) {
      return { ...invoice, complete: true };
    } else {
      return invoice;
    }
  })
);

但我不清楚如何更新invoices数组中某个对象内部的对象数组，具体来说，我需要更新指定id的invoice中item_amounts数组内的processing对象。

解决方案 #

和你更新单个属性的思路一致，通过两层map实现嵌套数组的更新，确保不修改原状态对象，符合React的不可变更新原则。

比如要修改指定id的invoice中processing对象的amount属性，可以这样写：

const updateProcessingAmount = (targetId, newAmount) => {
  setInvoices(
    invoices.map(invoice => {
      // 匹配目标invoice
      if (invoice.id === targetId) {
        return {
          ...invoice, // 保留原invoice的其他属性
          item_amounts: invoice.item_amounts.map(item => {
            // 匹配processing对象
            if (item.item === "processing") {
              return { ...item, amount: newAmount }; // 返回新对象，更新目标属性
            }
            return item; // 其他对象保持不变
          })
        };
      }
      return invoice; // 非目标invoice直接返回原对象
    })
  );
};

调用示例 #

如果要把id为123的invoice里processing的金额改成179，直接调用：

updateProcessingAmount(123, 179);

这种方式既保留了原状态中未修改的部分，又生成了全新的嵌套对象数组，完全符合React状态更新的要求。

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