React中合并对象数组：匹配名称累加分数问题求助

核心需求是合并两个数组中同名项的points，推荐用对象映射实现，效率更高（时间复杂度O(n)），避免反复查找的性能损耗。

核心合并逻辑 #

const mergePoints = (arr1, arr2) => {
  // 把第一个数组转成以name为键的映射，快速定位项
  const pointsMap = arr1.reduce((map, item) => {
    map[item.name] = item.points;
    return map;
  }, {});

  // 遍历第二个数组，累加同名项的points
  arr2.forEach(item => {
    if (pointsMap.hasOwnProperty(item.name)) {
      pointsMap[item.name] += item.points;
    } else {
      // 兼容处理：如果第二个数组有新名称，直接添加
      pointsMap[item.name] = item.points;
    }
  });

  // 把映射转回原数组格式
  return Object.entries(pointsMap).map(([name, points]) => ({
    name,
    points
  }));
};

结合你的React代码修改 #

你的代码有几处需要调整：

• useState初始值设为空数组[]，避免初始undefined导致后续操作报错
• 状态更新函数要对应变量名（setList改为setList1）
• 处理第二个文件时，要确保第一个列表已加载，或用useEffect监听列表变化自动合并

修改后的完整代码：

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const App = () => {
    const [list1, setList1] = useState([])
    const [list2, setList2] = useState([])
    const [mergedList, setMergedList] = useState([])

    const mergePoints = (arr1, arr2) => {
        const pointsMap = arr1.reduce((map, item) => {
            map[item.name] = item.points;
            return map;
        }, {});

        arr2.forEach(item => {
            if (pointsMap.hasOwnProperty(item.name)) {
                pointsMap[item.name] += item.points;
            } else {
                pointsMap[item.name] = item.points;
            }
        });

        return Object.entries(pointsMap).map(([name, points]) => ({
            name,
            points
        }));
    };

    const readFile = (file, number) => {
        const dayPath = `/files/`;

        axios.post(`http://localhost:5001/getData`, { dayPath, file })
            .then(res => {
                const parsedData = res.data.vehicles[1].vehicle.map(item => ({
                    name: item.name,
                    points: res.data.vehicles[0] - Number(item.Position) + 1
                }));

                if (number === 1) {
                    setList1(parsedData);
                } else {
                    setList2(parsedData);
                }
            })
            .catch(err => console.error('文件读取失败:', err));
    }

    // 监听两个列表变化，自动合并
    useEffect(() => {
        if (list1.length && list2.length) {
            setMergedList(mergePoints(list1, list2));
        }
    }, [list1, list2]);

    return (
        <div>
            <div>列表1: {JSON.stringify(list1)}</div>
            <div>列表2: {JSON.stringify(list2)}</div>
            <div>合并结果: {JSON.stringify(mergedList)}</div>
        </div>
    )
}

export default App

额外说明 #

• 用useEffect监听列表变化，不管两个文件加载顺序如何，只要都加载完成就会自动合并
• 如果不需要保留原始两个列表，也可以直接将合并结果更新到list1中

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