如何用动态过滤替代if-else优化React Redux数据处理逻辑

现有React状态定义如下：

// states 
const [drilledData, setDrilledData] = useState([])

当前实现了一个drillDownData函数，通过大量if-else语句根据seriesIndex（范围0-79，对应80个数据集）匹配对应的数据集（如coscoData、hapagData等），再根据dataPointIndex过滤出匹配item.dataSet的项，将其shipments赋值给drilledData状态：

const drillDownData = (seriesIndex, dataPointIndex) => {
    // here series index could be from 0-79 in that order
    // dataPointIndex is a number and item.dataSet is also a number
    // Refactor this code to remove if-else statements to something better

    if (seriesIndex === 0) {
      const filteredData = coscoData.filter((item) => item.dataSet === dataPointIndex)
      setDrilledData(filteredData[0].shipments)
    } else if (seriesIndex === 1) {
      const filteredData = hapagData.filter((item) => item.dataSet === dataPointIndex)
      setDrilledData(filteredData[0].shipments)
    } else if (seriesIndex === 2) {
      const filteredData = maerskData.filter((item) => item.dataSet === dataPointIndex)
      setDrilledData(filteredData[0].shipments)
    } else if (seriesIndex === 3) {
      const filteredData = othersData.filter((item) => item.dataSet === dataPointIndex)
      setDrilledData(filteredData[0].shipments)
    } else {
      setDrilledData([])
    }
    return null
  }

当前逻辑可正常运行，但需要重复编写80次if-else才能覆盖所有数据集（如aclData、admiralLineData等），数据集结构示例：

aclData = [{"dataSet": 1, "shipments" : [...{more objects}]}]

优化思路与实现代码 #

核心思路

• 将所有数据集按seriesIndex的顺序存入一个数组，用数组索引直接映射seriesIndex，替代if-else的条件判断
• 封装通用的过滤逻辑，复用代码
• 增加边界处理，避免数组越界或找不到匹配项时出现报错

优化后的代码

// 1. 按seriesIndex顺序将所有数据集存入数组，索引0对应seriesIndex=0，以此类推
const dataSets = [
  coscoData,
  hapagData,
  maerskData,
  othersData,
  aclData,
  admiralLineData,
  // ... 依次添加剩余74个数据集
];

const drillDownData = (seriesIndex, dataPointIndex) => {
  // 处理seriesIndex超出范围的情况
  if (seriesIndex < 0 || seriesIndex >= dataSets.length) {
    setDrilledData([]);
    return null;
  }

  // 获取对应索引的数据集
  const targetData = dataSets[seriesIndex];
  // 过滤匹配dataPointIndex的项，用find性能更优（找到即停止遍历）
  const filteredItem = targetData.find(item => item.dataSet === dataPointIndex);

  // 处理找不到匹配项的情况，避免读取undefined的shipments
  setDrilledData(filteredItem?.shipments || []);
  return null;
};

额外优化点

• 用find替代filter：因为只需要第一个匹配项，find遍历到目标后立即停止，性能优于filter
• 使用可选链?.和空值合并运算符||，避免因filteredItem为undefined导致的运行时错误
• 如果数据集是服务器动态返回的，可以在数据加载完成后动态构建dataSets数组，无需手动硬编码所有数据集

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