如何在React.js中使用map函数访问嵌套数组

问题根源 #

你的standings字段是双层嵌套数组：外层数组包裹着内层数组，而真正的球队数据集合在这个内层数组里。你之前直接对props.teams.league.standings调用map，遍历的是外层数组的每一项（也就是整个内层数组），而非单个球队对象，所以访问m.team.id会报错——因为m是数组，不是球队对象。

可行解决方案 #

方案1：直接取内层数组遍历 #

既然当前外层数组只有一个元素（包含所有球队的数组），可以通过索引[0]直接获取内层数组，再执行map：

const TeamList = (props) => {
  // 提取内层的球队数据数组
  const teamStandings = props.teams.league.standings[0];
  const teamCards = teamStandings.map((teamData) => (
    <Grid key={teamData.team.id} item xs={12} sm={6} md={4} lg={3} xl={2}>
      <Team key={teamData.team.id} team={teamData} />
    </Grid>
  ));
  return teamCards;
};

方案2：用flat()扁平化数组 #

如果后续数据可能扩展为多分组（比如联赛分多个赛区），可以用flat()把双层数组转为单层，再遍历：

const TeamList = (props) => {
  // 扁平化数组，默认处理一层嵌套
  const flattenedStandings = props.teams.league.standings.flat();
  const teamCards = flattenedStandings.map((teamData) => (
    <Grid key={teamData.team.id} item xs={12} sm={6} md={4} lg={3} xl={2}>
      <Team key={teamData.team.id} team={teamData} />
    </Grid>
  ));
  return teamCards;
};

如果有更深层级的嵌套，可传入参数flat(Infinity)处理所有层级。

方案3：嵌套map适配多分组场景 #

如果外层数组的每个元素对应不同分组（比如联赛小组），可以用嵌套map遍历外层分组和内层球队：

const TeamList = (props) => {
  const teamCards = props.teams.league.standings.map((group, groupIdx) => (
    group.map((teamData) => (
      <Grid key={`${groupIdx}-${teamData.team.id}`} item xs={12} sm={6} md={4} lg={3} xl={2}>
        <Team key={teamData.team.id} team={teamData} />
      </Grid>
    ))
  ));
  // 嵌套map会返回二维数组，需扁平化后渲染
  return teamCards.flat();
};

这种方式要注意key的唯一性，避免重复渲染问题。

补充说明 #

这类体育API返回双层数组，通常是为了支持多分组积分榜——比如联赛分赛区、小组时，外层数组的每个元素对应一个小组的积分榜，内层数组是该小组的球队数据。你当前的案例只有一个分组（英超整体），所以外层数组仅包含一个元素。

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