React中基于boxId替换数组对象并更新state的正确方法

我有一个React状态变量：

const [boxes, setBoxes] = useState([]);

执行操作后，boxes数组为：

boxes = [
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "5",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Beer & Wine",
                        "value": "Bar Cart - Beer & Wine",
                        "label": "Bar Cart - Beer & Wine"
                    }
                ]
            }
        ],
        "index": "Galley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }
]

现在需要将另一个数组通过状态更新添加到boxes中，该数组为：

const obj = [
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "5",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Beer & Wine",
                        "value": "Bar Cart - Beer & Wine",
                        "label": "Bar Cart - Beer & Wine"
                    }
                ]
            },
            {
                "code": "4",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Amenities Pouch",
                        "value": "Amenities Pouch",
                        "label": "Amenities Pouch"
                    }
                ]
            }
        ],
        "index": "Galley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }
]

由于boxes数组中的对象与obj数组中的对象boxId相同，我尝试了以下代码：

const i = boxes.findIndex(x => x.boxId === 'box6')
boxes[i] = [ ...obj]
setBoxes([...boxes,...obj])

但最终boxes数组中出现了两个对象，而我只需要保留obj中的那个对象。请问有没有更简便的正确实现方法？

方法一：用map替换匹配项 #

遍历原数组，遇到boxId匹配的项就替换成obj中的对象，其余项保持不变：

setBoxes(prevBoxes => 
  prevBoxes.map(box => 
    box.boxId === obj[0].boxId ? obj[0] : box
  )
);

这种写法遵循React状态不可变原则，直接基于上一次的状态prevBoxes生成新数组，不会修改原状态。

方法二：结合findIndex和数组切片 #

先找到匹配项的索引，再通过数组切片创建新数组替换对应位置：

setBoxes(prevBoxes => {
  const matchIndex = prevBoxes.findIndex(box => box.boxId === obj[0].boxId);
  if (matchIndex === -1) {
    // 无匹配项时直接追加
    return [...prevBoxes, ...obj];
  }
  // 替换匹配的项
  return [
    ...prevBoxes.slice(0, matchIndex),
    obj[0],
    ...prevBoxes.slice(matchIndex + 1)
  ];
});

该方法同时兼容“替换已有项”和“添加新项”两种场景。

原代码出错原因 #

你直接修改了原boxes数组（boxes[i] = [...obj]），之后又用[...boxes,...obj]把原数组和obj合并，导致原数组中的旧项没被移除，反而新增了obj的项，最终出现两个重复对象。React状态更新必须基于不可变原则，不能直接修改原状态数组，要通过创建新数组来更新。

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