如何在React中使用useState Hook合并两个数组

假设你已拥有两个目标数组：

const countArray = [
  { "id": 1, "count": "2" },
  { "id": 2, "count": "1" },
  { "id": 3, "count": "1" },
  { "id": 4, "count": "1" },
  { "id": 5, "count": "1" }
];

const nameArray = [
  { "id": 1, "name": "Laptop" },
  { "id": 2, "name": "SSD" },
  { "id": 3, "name": "Keyboard" },
  { "id": 4, "name": "Mouse" },
  { "id": 5, "name": "Speaker" }
];

方法一：map + find 直观合并 #

这种方式逻辑简单，适合数组规模不大的场景：

const mergedArray = countArray.map(item => {
  // 根据id匹配对应name对象
  const matchedNameItem = nameArray.find(nameItem => nameItem.id === item.id);
  // 合并两个对象，匹配不到时用空对象避免报错
  return { ...item, ...(matchedNameItem || {}) };
});

方法二：构建映射表提升性能 #

如果数组元素较多，先将其中一个数组转为以id为键的映射对象，能把时间复杂度从O(n²)降到O(n)，性能更优：

// 把name数组转成id->对应对象的映射表
const nameMap = nameArray.reduce((map, item) => {
  map[item.id] = item;
  return map;
}, {});

// 遍历count数组，直接通过映射表匹配合并
const mergedArray = countArray.map(item => ({
  ...item,
  ...nameMap[item.id]
}));

在 React 组件中结合 useState 使用 #

如果原数组是组件状态/Props，或者需要将合并结果存入状态，可以这样实现：

import { useState, useEffect } from 'react';

function MyComponent() {
  // 初始化原数组状态
  const [counts, setCounts] = useState([
    { "id": 1, "count": "2" },
    { "id": 2, "count": "1" },
    { "id": 3, "count": "1" },
    { "id": 4, "count": "1" },
    { "id": 5, "count": "1" }
  ]);
  
  const [names, setNames] = useState([
    { "id": 1, "name": "Laptop" },
    { "id": 2, "name": "SSD" },
    { "id": 3, "name": "Keyboard" },
    { "id": 4, "name": "Mouse" },
    { "id": 5, "name": "Speaker" }
  ]);

  // 存储合并后的结果
  const [mergedData, setMergedData] = useState([]);

  // 当原数组变化时重新合并
  useEffect(() => {
    const nameMap = names.reduce((map, item) => {
      map[item.id] = item;
      return map;
    }, {});

    const merged = counts.map(item => ({
      ...item,
      ...nameMap[item.id]
    }));

    setMergedData(merged);
  }, [counts, names]);

  return (
    <div>
      <h3>Merged Data:</h3>
      <ul>
        {mergedData.map(item => (
          <li key={item.id}>
            {item.name}: {item.count}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

执行后就能得到你期望的合并结果，每个对象包含id、count和name字段。

内容的提问来源于stack exchange，提问作者Mustafa Özkan