React JS中如何对同名称下同日期的数组值求和

原数据 #

const MyArray = [
  {name:"vehicle",data:[{y: 500, x: '2022-12-12'},{y: 700, x: '2022-12-12'}]},
  {name:"medical",data:[{y: 500, x: '2030-10-12'},{y: 700, x: '2040-12-12'}]}
];

期望输出（修正笔误后的正确结果） #

const MyArray = [
  {name:"vehicle",data:[{y: 1200, x: '2022-12-12'}]},
  {name:"medical",data:[{y: 500, x: '2030-10-12'},{y: 700, x: '2040-12-12'}]}
];

实现方案 #

可以通过纯函数处理数据，核心思路是对每个分类下的data数组按日期分组，累加相同日期的y值，再重组数组。

数据处理函数

const mergeSameDateData = (arr) => {
  return arr.map(category => {
    // 按日期分组并累加y值
    const grouped = category.data.reduce((acc, current) => {
      if (acc[current.x]) {
        acc[current.x].y += current.y;
      } else {
        acc[current.x] = {...current};
      }
      return acc;
    }, {});

    // 转换回数组并返回新的分类对象
    return {
      ...category,
      data: Object.values(grouped)
    };
  });
};

在React组件中使用

如果数据是组件状态，可在useEffect中处理初始化数据，或者在获取到接口数据后直接处理：

import { useState, useEffect } from 'react';

function DataComponent() {
  const [originalData, setOriginalData] = useState([
    {name:"vehicle",data:[{y: 500, x: '2022-12-12'},{y: 700, x: '2022-12-12'}]},
    {name:"medical",data:[{y: 500, x: '2030-10-12'},{y: 700, x: '2040-12-12'}]}
  ]);
  const [processedData, setProcessedData] = useState([]);

  useEffect(() => {
    // 处理数据
    const merged = mergeSameDateData(originalData);
    setProcessedData(merged);
  }, [originalData]);

  return (
    <div className="data-container">
      {processedData.map(category => (
        <div key={category.name} className="category">
          <h3>{category.name}</h3>
          <div className="entries">
            {category.data.map((entry, index) => (
              <p key={index}>日期: {entry.x}，数值: {entry.y}</p>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// 数据处理函数可放在组件外部或内部
const mergeSameDateData = (arr) => {
  return arr.map(category => {
    const grouped = category.data.reduce((acc, current) => {
      if (acc[current.x]) {
        acc[current.x].y += current.y;
      } else {
        acc[current.x] = {...current};
      }
      return acc;
    }, {});

    return {
      ...category,
      data: Object.values(grouped)
    };
  });
};

export default DataComponent;

代码说明 #

1. map遍历分类：逐个处理每个name对应的分类项
2. reduce分组求和：以日期x为键，累加相同日期的y值，避免修改原数据
3. 纯函数设计：处理过程不修改原数组，符合React状态不可变的原则，适合管理组件状态

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