使用groupBy分组JSON数据后调用map()报错及迭代问题排查

安全阿岳

2026-7-1

分组后数据遍历问题解决

第一个错误原因及解决

你的groupBy函数返回的是对象（键为联赛ID，值为对应分组的比赛数组），而map是数组专属方法，对象没有这个方法，所以直接调用groupBy(matches).map()会抛出TypeError: groupBy(...).map is not a function。

要遍历分组后的对象，需先用Object.entries()将其转换为[键, 值]结构的数组，再进行后续操作。

编辑1的`undefined`问题解决

你用Object.entries(groupBy(matches)).map(([key, value]) => {console.log(value.league)})得到20个undefined，是因为value是分组后的比赛数组，数组本身没有league属性。正确做法是遍历数组内的单个比赛对象：

Object.entries(groupBy(matches)).map(([key, matchesGroup]) => {
  // 遍历分组里的每个比赛对象
  matchesGroup.forEach(match => {
    console.log(match.league);
  });
});

编辑2的迭代错误解决

你在value.map(([index, match]) => { ... })中使用了数组解构，但value（即matchesGroup）里的每个元素是单个比赛对象，不是数组，所以会报错object is not iterable。

如果是在React中渲染组件，正确写法如下（注意React需要返回JSX数组，不能用forEach）：

// 示例：返回渲染的组件数组
return Object.entries(groupBy(matches)).map(([leagueId, matchesGroup]) => {
  return matchesGroup.map((match, index) => {
    // 建议用 leagueId+index 作为key，避免重复
    return <MatchMonthCard match={match} index={index} key={`${leagueId}-${index}`} />;
  });
});