React应用中统计数组对象指定属性值数量的实现方案

嘿，我刚好做过类似的需求，给你分享一个超级好用的可复用方案，不管你要统计数组里对象的哪个属性，都能直接套用，再也不用重复写统计逻辑啦！

核心思路：封装通用统计函数 #

最关键的就是把「遍历数组-统计属性值」的逻辑抽离成通用函数，之后不管统计哪个属性，只要传对应的参数就行，完美解决多属性统计的复用问题。

通用统计函数（指定目标值） #

如果你只关心特定的几个属性值（比如你需要的running和stopped），可以用这个版本：

// 通用属性统计函数：统计指定属性下，目标值的出现次数
const getPropertyCount = (data, propName, targetValues) => {
  return data.reduce((counts, item) => {
    const currentValue = item[propName];
    // 只统计我们关心的目标值
    if (targetValues.includes(currentValue)) {
      counts[currentValue] = (counts[currentValue] || 0) + 1;
    }
    return counts;
  }, {});
};

通用统计函数（统计所有值） #

如果需要统计某个属性下所有出现过的值的数量（比如除了running、stopped，还有pending之类的状态），可以用这个版本：

// 通用属性统计函数：统计指定属性下所有值的出现次数
const getAllPropertyCounts = (data, propName) => {
  return data.reduce((counts, item) => {
    const currentValue = item[propName];
    counts[currentValue] = (counts[currentValue] || 0) + 1;
    return counts;
  }, {});
};

在React组件中使用 #

接下来在你的React组件里调用这个函数就行，这里推荐用useMemo缓存统计结果，避免每次组件渲染都重复计算，提升性能：

import { useMemo } from 'react';

// 先把上面的通用函数导入进来，或者直接写在组件里

function StatsDisplay({ data }) {
  // 统计State_Name的running和stopped数量
  const stateNameStats = useMemo(() => {
    return getPropertyCount(data, 'State_Name', ['running', 'stopped']);
  }, [data]); // 只有data变化时才重新计算

  // 统计另一个属性，比如假设还有个"Status_Type"属性，统计active和inactive
  const statusTypeStats = useMemo(() => {
    return getPropertyCount(data, 'Status_Type', ['active', 'inactive']);
  }, [data]);

  // 如果要统计所有State_Name的值，就用另一个函数
  const allStateNameStats = useMemo(() => {
    return getAllPropertyCounts(data, 'State_Name');
  }, [data]);

  return (
    <div className="stats-container">
      {/* 按你的需求输出指定统计结果 */}
      <p>有{stateNameStats.running || 0}个running和{stateNameStats.stopped || 0}个stopped</p>
      
      {/* 其他属性的统计结果 */}
      <p>有{statusTypeStats.active || 0}个active和{statusTypeStats.inactive || 0}个inactive</p>
      
      {/* 展示所有State_Name的统计（可选） */}
      <div>
        <h3>所有状态统计：</h3>
        {Object.entries(allStateNameStats).map(([status, count]) => (
          <p key={status}>{status}: {count}个</p>
        ))}
      </div>
    </div>
  );
}

小细节说明 #

• 用|| 0是为了避免某个状态没有出现时显示undefined，比如如果没有running的项，就会显示0。
• useMemo的依赖数组里放data，确保只有当原始数据变化时才重新计算统计结果，避免不必要的性能损耗。
• 这个方案完全可复用，不管你后面要统计哪个属性，只需要传不同的propName和targetValues就行，不用再写重复的reduce逻辑。

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