React中过滤与转换表格数据：合并关联参数的实现

核心数据处理函数 #

先实现一个专门处理数据的函数，完成过滤与参数合并逻辑：

function processProgramData(programData) {
  // 第一步：过滤出ParameterMenu为'MON'的数据项
  const filteredData = programData.filter(item => item.ParameterMenu === 'MON');
  
  // 创建参数映射表，方便快速查找对应上下限参数
  const paramMap = new Map();
  filteredData.forEach(item => {
    paramMap.set(item.ParameterName, item);
  });
  
  // 第二步：合并关联参数
  const processedData = [];
  filteredData.forEach(item => {
    // 只处理主参数（排除Upper/Lower结尾的项）
    if (!item.ParameterName.endsWith('Upper') && !item.ParameterName.endsWith('Lower')) {
      const paramName = item.ParameterName;
      const upperParam = paramMap.get(`${paramName}Upper`);
      const lowerParam = paramMap.get(`${paramName}Lower`);
      
      processedData.push({
        ...item,
        toleranceUpper: upperParam ? upperParam.Value : null,
        toleranceLower: lowerParam ? lowerParam.Value : null
      });
    }
  });
  
  return processedData;
}

逻辑说明 #

• 过滤阶段：用数组filter方法筛选符合条件的项，只保留ParameterMenu等于'MON'的数据。
• 映射表创建：用Map存储所有过滤后的参数，键为ParameterName，查找上下限参数的时间复杂度为O(1)，提升处理效率。
• 参数合并：遍历过滤后的项，仅处理非上下限结尾的主参数，通过映射表快速匹配对应的XUpper和XLower，将它们的Value赋值给新字段toleranceUpper和toleranceLower，找不到对应项则设为null。

整合到React组件 #

将处理函数结合useMemo（避免重复计算）整合到组件中，示例代码如下：

import { useMemo } from 'react';

const DataTable = ({ programData }) => {
  // 用useMemo缓存处理后的数据，仅当programData变化时重新计算
  const processedData = useMemo(() => {
    return processProgramData(programData);
  }, [programData]);

  return (
    <table>
      <thead>
        <tr>
          <th>参数名称</th>
          <th>参数值</th>
          <th>上限公差</th>
          <th>下限公差</th>
          {/* 其他表头字段可按需添加 */}
        </tr>
      </thead>
      <tbody>
        {processedData.map((item, index) => (
          <tr key={index}>
            <td>{item.ParameterName}</td>
            <td>{item.Value}</td>
            <td>{item.toleranceUpper ?? '-'}</td>
            <td>{item.toleranceLower ?? '-'}</td>
            {/* 其他表格字段可按需添加 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataTable;

示例验证 #

输入示例ProgramData #

const sampleProgramData = [
  { ParameterMenu: 'MON', ParameterName: 'Temperature', Value: 25 },
  { ParameterMenu: 'MON', ParameterName: 'TemperatureUpper', Value: 30 },
  { ParameterMenu: 'MON', ParameterName: 'TemperatureLower', Value: 20 },
  { ParameterMenu: 'MON', ParameterName: 'Pressure', Value: 101 },
  { ParameterMenu: 'OTHER', ParameterName: 'Humidity', Value: 60 },
  { ParameterMenu: 'MON', ParameterName: 'PressureUpper', Value: 105 }
];

处理后输出 #

[
  {
    ParameterMenu: 'MON',
    ParameterName: 'Temperature',
    Value: 25,
    toleranceUpper: 30,
    toleranceLower: 20
  },
  {
    ParameterMenu: 'MON',
    ParameterName: 'Pressure',
    Value: 101,
    toleranceUpper: 105,
    toleranceLower: null
  }
]

内容的提问来源于stack exchange，提问作者said al hendi