React JS统计字符串数组重复项 实现ChartJS目的地频次条形图

直接替换你现有逻辑里的数据处理部分即可，不需要改动后续图表组件的原有配置。

替换后的完整代码 #

// 构建目的地计数映射表，单次遍历完成去重+统计
const destinationCountMap = {}
res.data.forEach(item => {
  // 过滤空值目的地，避免无效数据影响渲染
  if (!item.destination) return
  const currentDest = item.destination
  // 首次识别到新目的地时，初始化计数为0
  if (!destinationCountMap[currentDest]) {
    destinationCountMap[currentDest] = 0
  }
  // 累加对应目的地的出现次数
  destinationCountMap[currentDest] += 1
})
// 拆分聚合结果为图表要求的入参
// x轴标签：自动去重后的全量目的地名称
const dataArrayX4 = Object.keys(destinationCountMap)
// y轴数据集：与x轴顺序一一对应的目的地出现次数
const dataArrayY4 = Object.values(destinationCountMap)
// 原有状态绑定逻辑完全不变
this.setState({
  data4: dataArrayY4,
  labels4: dataArrayX4,
})

关键注意事项 #

• 处理后的两个数组长度完全匹配、元素顺序严格对应，不会出现Chart.js渲染时标签与条形错位的常见问题
• 这种单次遍历聚合的写法，比「先用Set对目的地去重，再二次遍历统计次数」的写法性能更好，接口返回数据量较大时也不会出现卡顿
• 后续如果要调整统计维度（比如统计每个目的地的累计停留时长），只需要把累加计数的语句替换为destinationCountMap[currentDest] += item.time即可，其余逻辑不需要改动

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