如何在React Map操作中去除重复联赛ID，实现单联赛头部展示

问题核心是你把LeagueHeader放在了单场赛事的MatchMonthCard组件里，导致每个赛事卡片都带一个联赛头部。正确的做法是按联赛分组遍历，每个分组只渲染一次头部，再在头部下方渲染该联赛的所有赛事卡片。

具体实现步骤 #

假设你已经通过groupBy得到了按联赛ID分组的数据：const groupedMatches = groupBy(matches, 'leagueId')，结构为{ [leagueId]: [match1, match2, ...] }

1. 调整渲染层级，把LeagueHeader提到分组外层

原来的错误写法（每个赛事卡片都带头部）：

Object.entries(groupedMatches).map(([leagueId, matches]) => {
  return matches.map(match => (
    // MatchMonthCard内部包含LeagueHeader，导致重复渲染
    <MatchMonthCard key={match.id} match={match} />
  ))
})

修正后的写法（每个联赛只渲染一次头部）：

Object.entries(groupedMatches).map(([leagueId, matches]) => {
  // 从该联赛的任意一场赛事中获取联赛信息（或从单独的联赛数据中匹配）
  const leagueInfo = matches[0].league;
  
  return (
    <div key={leagueId} className="league-container">
      {/* 每个联赛仅渲染一次头部 */}
      <LeagueHeader league={leagueInfo} />
      {/* 遍历该联赛下的所有赛事，渲染不带头部的赛事卡片 */}
      {matches.map(match => (
        <MatchMonthCard key={match.id} match={match} />
      ))}
    </div>
  )
})

2. 剥离MatchMonthCard中的LeagueHeader

修改MatchMonthCard组件，移除内部的LeagueHeader逻辑，让它只负责渲染单场赛事的内容，职责更清晰：

// MatchMonthCard.jsx
const MatchMonthCard = ({ match }) => {
  return (
    <div className="match-card">
      {/* 只保留单场赛事的信息：日期、对阵、比分等 */}
      <div>{match.date}</div>
      <div>{match.homeTeam} vs {match.awayTeam}</div>
      {/* ...其他赛事内容 */}
    </div>
  )
}

3. 优化：从单独的联赛数据中匹配信息（可选）

如果你的赛事数据里没有完整的联赛信息，而是有单独的联赛列表，可以通过联赛ID精准匹配：

// 假设你有独立的联赛数据数组
const leagueList = [
  { id: 1, name: "英超", logo: "xxx.png" },
  { id: 2, name: "西甲", logo: "yyy.png" }
]

Object.entries(groupedMatches).map(([leagueId, matches]) => {
  const leagueInfo = leagueList.find(league => league.id === parseInt(leagueId));
  if (!leagueInfo) return null; // 找不到对应联赛时跳过渲染

  return (
    <div key={leagueId} className="league-container">
      <LeagueHeader league={leagueInfo} />
      {matches.map(match => (
        <MatchMonthCard key={match.id} match={match} />
      ))}
    </div>
  )
})

额外注意事项 #

• 确保key的唯一性：外层容器用leagueId，赛事卡片用match.id，避免React渲染警告
• 可以添加空数据判断：如果某个联赛下没有赛事，直接跳过该分组的渲染
• 保持组件职责单一：头部组件负责联赛信息展示，赛事卡片负责单场赛事展示，后续维护更方便

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