如何根据id更新嵌套数组object

Question

我在更新嵌套的 state 数组时遇到问题，我有用户扫描 QR 码的模块，该值将更新跟踪号。 目前我使用 react js 作为前端，laravel 作为后端。

问题：当我扫描二维码时，跟踪号未设置为特定 ID。

目标：我想将 QR 值设置为特定的 id，而不是创建新数组。

预期的 Output 必须是 [id 33]：

"bookings": [
    {
      "id": 33,
      "tracking_number": '83827172',
      "status": "deliver",
      "sub_status": "Completed",
      "delivery_type": "regular",
      "recipient": "tom",
      "parcel": {
        "id": 33,
        "type": "bind",
        "price": 95,
        "description": "tshirt"
      }
    },
    {
        "id": 34,
        "tracking_number": null,
        "status": "pending",
        "sub_status": "pending",
        "delivery_type": "regular",
        "recipient": "rey",
        "parcel": {
          "id": 33,
          "type": "bind",
          "price": 95,
          "description": "pants"
        }
      },
  ],

响应 JSON：

{
  "id": 20,
  "type": "pickup",
  "address": {
    "id": 65,
    "country_id": 12,
    "house_number": "002",
    "created_at": "2022-07-30T07:11:41.000Z",
    "updated_at": "2022-07-30T07:11:41.000Z"
  },
  "bookings": [
    {
      "id": 33,
      "tracking_number": null,
      "status": "deliver",
      "sub_status": "Completed",
      "delivery_type": "regular",
      "recipient": "tom",
      "parcel": {
        "id": 33,
        "type": "bind",
        "price": 95,
        "description": "tshirt"
      }
    },
    {
        "id": 34,
        "tracking_number": null,
        "status": "pending",
        "sub_status": "pending",
        "delivery_type": "regular",
        "recipient": "rey",
        "parcel": {
          "id": 33,
          "type": "bind",
          "price": 95,
          "description": "pants"
        }
      },
    {
      "tracking_number": "test"
    }
  ],
}

这是我的处理程序 function：

    const ReadQRHandler = (e, index) => {

    //note index is 

    const x = setScannedItems(prevState => (
      {
        ...prevState,
        bookings: [
          ...prevState.bookings,
          {'tracking_number': 'test'}
        ]
      }
    ));

    console.log(x)
    
    setIsStartScan(!isStartScan);
  };

非常感谢您的回复...

谢谢你。

Answer 1

你可以改变

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'} object 添加到现有的bookings数组中，而是将现有的bookings数组替换为包含bookings数组中所有相同对象的新数组，除了替换任何对象其中 id 为 33，带有 object 的新副本，但tracking_number字段更改为'test' 。

Answer 2

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

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

sry 可能会弄乱一些括号，因为在电话上......

因此，您有一系列预订，您知道应该更新预订女巫的 id。

由于预订是数组并且您不知道数组的女巫索引会满足匹配，因此您没有太多选择，只有两个，第一个是找到应该更改的元素索引，然后您可以申请按索引更改...第二个选项（更现代）是在创建新数组时迭代数组（map 是做什么的）并在迭代时有条件地更改元素。 显然，车工运算符（？）在这种情况下对减少代码量很有帮助……

另一个选项是创建键值 object ，它将 id 作为键，例如：

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

那么你可以通过这样做来应用它：

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

但我真的不认为这种方式会增加更多的性能提升，因为我认为 react 使用不可变对象进行 state 突变，所以每次你做 setState 你实际上创建新的 object （但我可能是错的）