您可以将

bookings: [
  ...prevState.bookings,
  {'tracking_number': 'test'}
]

更改为

bookings: prevState.bookings.map(booking => {
    if (booking.id !== 33) return booking;
    return {
        ...booking,
        tracking_number: 'test'
    };
})

这样，您无需将新的 {'tracking_number': 'test'> 对象添加到现有的 bookings 数组中，而是将现有的 bookings 数组替换为一个新数组，该新数组包含与 bookings 数组相同的所有对象，但将 id 为 33 的所有对象替换为该对象的新副本，但 tracking_number 字段更改为 'test' 。

若要做到这一点而不创建新的预订数组，您需要预订的键值对象。若要对预订执行此操作，您可以执行以下操作：

({…prevState, 
     bookings: prevState.bookings.map(booking => ({…booking, tracking_number: id === whateverIdYouSearch ? “test” : booking.tracking_number})
})

抱歉，由于在电话上，可能会弄乱一些括号……

因此，您有一个预订数组，您知道应该更新的预订 ID。

由于预订是数组，并且您不知道数组的哪个索引会满足匹配，因此您没有太多选择，但有两个选择，第一个是找到应该更改的元素的索引，然后您可以通过索引应用更改……第二个选项（更现代）是在创建新数组时迭代数组（地图的作用），并在迭代时有条件地更改元素。显然，在这种情况下，turnery 运算符（？）非常有助于减少代码量……

另一种选择是创建以 id 为键的键值对象，例如：

bookings: { “37”: { id: … } }

然后您可以通过执行以下操作来应用它：

({…prevState, bookings: {…prevState.bookings, yourId : {…prevState.bookings.yorId, tracking_number: ”test”} })

但我并不认为这种方式会增加任何性能提升，因为我认为 react 确实使用不可变对象来改变状态，所以每次您执行 setState 时，您实际上都会创建新对象（但我可能是错的）