如何基于ID更新React嵌套数组对象中的追踪号

问题根源 #

你当前的代码通过...prevState.bookings, {'tracking_number': 'test'}将新对象追加到bookings数组末尾，这就是为什么会新增数组项，而非修改已有对象的tracking_number。

解决方案 #

要修改指定ID（或索引）的对象，需遍历bookings数组，找到目标项后创建其副本并更新属性，其他项保持不变。React状态更新遵循不可变原则，必须返回新的状态对象/数组。

方案1：根据booking的ID定位（更可靠，不受数组顺序影响） #

const ReadQRHandler = (e, index) => {
  setScannedItems(prevState => ({
    ...prevState,
    bookings: prevState.bookings.map(booking => {
      // 匹配目标ID（示例为33），更新tracking_number
      if (booking.id === 33) {
        return { ...booking, tracking_number: 'test' };
      }
      // 其他项直接返回原对象
      return booking;
    })
  }));

  setIsStartScan(!isStartScan);
};

方案2：根据数组索引定位（如果index是目标项在bookings中的位置） #

const ReadQRHandler = (e, index) => {
  setScannedItems(prevState => ({
    ...prevState,
    bookings: prevState.bookings.map((booking, idx) => {
      if (idx === index) {
        return { ...booking, tracking_number: 'test' };
      }
      return booking;
    })
  }));

  setIsStartScan(!isStartScan);
};

额外提示 #

• 原代码中的console.log(x)无意义，因为setState是异步操作，返回值为undefined，可直接删除。
• 记得将示例中的'test'替换为实际扫码得到的追踪号值。

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