React中如何依据另一数组对象ID更新数组并添加新对象

要实现保留原数组中未在新数组出现的ID项、更新新旧数组共有的ID项、添加新数组独有的ID项的需求，可以通过以下方式完成：

核心思路 #

把原数组转换成以id为键的对象（实现快速查找与更新），遍历新数组完成更新/新增操作，最后再转回数组格式。

完整代码示例 #

import React from 'react';

function App() {
  const [arr, setArr] = React.useState([
    { label: "dummy01", id: 2 },
    { label: "dummy02", id: 5 },
  ]);

  const newArray = [
    { label: 'dummy Altered01', id: 2 },
    { label: 'different', id: 10 },
    { label: 'different 02', id: 55 }
  ];

  const updateArray = () => {
    // 1. 将原数组转为 {id: 对应对象} 的映射结构
    const arrMap = arr.reduce((map, item) => {
      map[item.id] = item;
      return map;
    }, {});

    // 2. 遍历新数组：更新已有ID的项，添加新ID的项
    newArray.forEach(newItem => {
      // 合并新旧对象，新项属性会覆盖旧项同名属性
      arrMap[newItem.id] = { ...arrMap[newItem.id], ...newItem };
    });

    // 3. 将映射转回数组，得到最终结果
    const updatedArr = Object.values(arrMap);
    setArr(updatedArr);
  };

  return (
    <div>
      <button onClick={updateArray}>更新数组</button>
      <pre>{JSON.stringify(arr, null, 2)}</pre>
    </div>
  );
}

export default App;

效果说明 #

执行updateArray后，数组会完全符合你的期望：

[
  { "label": "dummy Altered01", "id": 2 },
  { "label": "dummy02", "id": 5 },
  { "label": "different", "id": 10 },
  { "label": "different 02", "id": 55 }
]

• 原数组中id=5的项因未在新数组出现，会被完整保留
• 新数组中id=2的项会覆盖原数组对应ID的label属性
• 新数组中id=10、id=55的项会被新增到数组中

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