React-Redux中能否将后端返回的mydata转换为指定格式的dataneeded？

当然可以实现！这种将分散数据按指定字段分组并合并属性的需求在前端开发中非常常见，尤其是处理后端返回的结构化数据时。下面我会给你清晰的实现思路和可直接复用的代码示例，适配你的React-Redux项目场景。

先明确数据结构示例 #

为了更直观，先假设你的原始数据和期望的目标数据结构如下：

原始后端数据（mydata） #

const mydata = [
  { source: 'Web', Registernumber: 'REG001', jul1: 45 },
  { source: 'Web', Registernumber: 'REG001', jul2: 62 },
  { source: 'App', Registernumber: 'REG002', jul1: 38 },
  { source: 'Web', Registernumber: 'REG001', jul5: 51 },
  { source: 'App', Registernumber: 'REG002', jul3: 49 },
];

期望的目标数据（dataneeded） #

const dataneeded = [
  {
    source: 'Web',
    Registernumber: 'REG001',
    jul1: 45,
    jul2: 62,
    jul5: 51
  },
  {
    source: 'App',
    Registernumber: 'REG002',
    jul1: 38,
    jul3: 49
  }
];

核心实现逻辑：使用reduce分组合并 #

JavaScript的Array.prototype.reduce()方法是处理这类分组聚合需求的最优选择，它可以高效地遍历原始数组，逐步构建我们需要的结构。

通用转换函数 #

const transformData = (rawData) => {
  // 使用reduce构建临时分组对象，键为source和Registernumber的组合
  const grouped = rawData.reduce((acc, currentItem) => {
    // 生成唯一分组键，确保相同source+Registernumber的对象分到同一组
    const groupKey = `${currentItem.source}-${currentItem.Registernumber}`;
    
    // 提取当前对象中的日期字段（排除source和Registernumber）
    const dateFields = Object.entries(currentItem).filter(([key]) => {
      return !['source', 'Registernumber'].includes(key);
    });
    
    if (!acc[groupKey]) {
      // 首次遇到该分组，初始化基础结构并添加当前日期字段
      acc[groupKey] = {
        source: currentItem.source,
        Registernumber: currentItem.Registernumber,
        ...Object.fromEntries(dateFields)
      };
    } else {
      // 分组已存在，合并新的日期字段到已有对象
      acc[groupKey] = {
        ...acc[groupKey],
        ...Object.fromEntries(dateFields)
      };
    }
    
    return acc;
  }, {});
  
  // 将临时对象的值转换为数组，得到最终的目标结构
  return Object.values(grouped);
};

在React-Redux中的应用方式 #

你可以根据项目的数据流习惯，选择以下两种方式应用这个转换逻辑：

1. 在Action Creator中转换（获取数据后立即处理） #

适合希望store中直接存储处理后的数据的场景：

// 异步Action示例
export const fetchAndTransformData = () => async (dispatch) => {
  try {
    const res = await fetch('/your-backend-api');
    const mydata = await res.json();
    // 转换数据
    const dataneeded = transformData(mydata);
    // 分发到store
    dispatch({ type: 'SET_TRANSFORMED_DATA', payload: dataneeded });
  } catch (err) {
    dispatch({ type: 'FETCH_DATA_FAILED', payload: err.message });
  }
};

2. 使用Selector延迟转换（从store取数据时处理） #

适合需要缓存转换结果、避免重复计算的场景（推荐使用reselect库）：

import { createSelector } from 'reselect';

// 从store中获取原始未转换的数据
const selectRawData = (state) => state.data.rawData;

// 创建缓存的selector，仅当原始数据变化时重新计算
export const selectTransformedData = createSelector(
  [selectRawData],
  (rawData) => transformData(rawData)
);

// 在组件中使用
const MyComponent = () => {
  const dataneeded = useSelector(selectTransformedData);
  // ...渲染逻辑
};

注意事项 #

• 如果你的日期字段命名规则有变化（比如不是julX而是其他格式），只需要调整filter中的判断逻辑即可。
• 如果存在同一分组下同一日期字段重复的情况，后面的数值会覆盖前面的，你可以根据需求修改合并逻辑（比如求和、取平均值等）。

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