React中嵌套Map解析赛事JSON时获取数据遇Undefined问题

问题原因解析 #

1. match.teams.map(...)的局限：
   直接遍历match.teams数组时，map的回调默认只返回当前team元素和对应索引index。你并非无法获取其他数组的对应数据，只是没利用index去关联match.goals[index]、match.score[index]等同位置元素——如果只取team本身，自然拿不到其他字段。

2. [match]?.map(...)的本质：
   这种写法是把单个match对象塞进数组后再遍历，此时map的回调参数就是完整的match对象，所以能访问所有字段，但这是完全多余的操作。你本来就可以直接使用match对象，没必要用map“遍历”单个元素，既不高效也不直观。

可行解决方案 #

方案1：利用索引关联对应元素 #

既然各数组元素一一对应，遍历任意数组时，用回调的第二个参数index去取其他数组同位置元素即可：

// 假设match是单个赛事对象
match.teams.map((team, index) => {
  // 避免索引越界导致undefined
  if (index >= match.league.length || index >= match.goals.length || index >= match.score.length) {
    return null;
  }
  const currentLeague = match.league[index];
  const currentGoals = match.goals[index];
  const currentScore = match.score[index];

  return (
    <div key={index} className="match-item">
      <h3>{currentLeague}</h3>
      <p>球队：{team}</p>
      <p>进球数：{currentGoals}</p>
      <p>当前比分：{currentScore}</p>
    </div>
  );
});

方案2：预处理数据，合并成结构化对象数组 #

如果觉得索引操作不够直观，可先把对应位置的元素合并为单个对象，再遍历处理后的数组，逻辑更清晰：

// 预处理：将各数组对应元素合并为对象
const structuredMatchData = match.teams.map((team, index) => ({
  league: match.league[index],
  team,
  goals: match.goals[index],
  score: match.score[index],
})).filter(item => item.league && item.goals && item.score); // 过滤无效数据

// 遍历处理后的数组
structuredMatchData.map((item, index) => (
  <div key={index} className="match-item">
    <h3>{item.league}</h3>
    <p>球队：{item.team}</p>
    <p>进球数：{item.goals}</p>
    <p>当前比分：{item.score}</p>
  </div>
));

方案3：优化原始数据结构（推荐） #

如果可以修改原始JSON结构，建议把每个赛事的相关字段整合为单个对象，避免分散在多个数组中。比如调整为：

{
  "matches": [
    {
      "league": "英超",
      "team": "曼联",
      "goals": 2,
      "score": "2-1"
    },
    {
      "league": "西甲",
      "team": "巴萨",
      "goals": 3,
      "score": "3-0"
    }
  ]
}

后续遍历只需matches.map(match => ...)即可，从根源上解决多数组关联的麻烦。

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