React中如何通过setState统计数组元素的出现次数？

DevOps 小满

2026-8-4

解决数字出现次数统计的状态更新问题

先指出你代码里的两个问题：

初始状态没必要用数组包裹对象：你需要的是一个统计对象，直接把useState的初始值设为对象即可，不需要外层数组。
不能用map循环调用setGroupedEdition：setState是异步操作，循环里每次调用都会基于旧的状态值更新，最终只会得到最后一个元素的统计结果，而且会触发多次不必要的组件重渲染。

正确实现步骤：

1. 修正初始状态

把useState的初始值改成纯对象：

const edition = [6, 6, 6, 1, 1, 2];
const [groupedEdition, setGroupedEdition] = useState({
  "0": 0, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0
});

2. 编写统计并更新状态的逻辑

推荐用useEffect监听edition数组的变化，一次性计算出统计结果后更新状态，这里提供两种写法：

写法一：用`forEach`遍历累加

import { useState, useEffect } from 'react';

// ...其他组件代码
useEffect(() => {
  // 复制初始统计对象，避免直接修改状态
  const countResult = {...groupedEdition};
  // 遍历数组累加对应数字的次数
  edition.forEach(num => {
    countResult[num]++;
  });
  // 一次性更新状态
  setGroupedEdition(countResult);
}, [edition]); // 当edition数组变化时重新计算

写法二：用`reduce`更简洁

import { useState, useEffect } from 'react';

// ...其他组件代码
useEffect(() => {
  const countResult = edition.reduce((acc, num) => {
    acc[num]++;
    return acc;
  }, {...groupedEdition}); // 以初始统计对象为累加器起点
  setGroupedEdition(countResult);
}, [edition]);