React.js与Django中外键ID转换为俱乐部名称的问题

你可以通过两种方式将俱乐部ID替换为名称：

方式一：渲染时动态查找（推荐，无需修改原数据） #

直接在渲染游戏列表时，根据俱乐部ID从clubs数组中匹配对应的名称，同时添加 fallback 避免找不到数据时显示空白：

修改渲染部分的代码：

return (
  <Base>
    {games.map((game) => {
      // 根据ID查找对应俱乐部
      const homeClub = clubs.find(club => club.id === game.home_team);
      const awayClub = clubs.find(club => club.id === game.away_team);
      // 优先显示名称，找不到则显示原ID
      const homeName = homeClub?.name || game.home_team;
      const awayName = awayClub?.name || game.away_team;

      return (
        <p key={game.id}>
          Home) {homeName}: {game.home_score} Away) {awayName}: {game.away_score}
        </p>
      )
    })}
  </Base>
)

方式二：预处理游戏数据（修改状态） #

如果希望直接修改games状态，将ID替换为名称，可以在获取到俱乐部数据后更新游戏列表：

首先调整useEffect的依赖（原代码中加载俱乐部的依赖games不合理，会导致重复请求），然后在loadAllClubs中处理数据：

// 调整useEffect，同时加载游戏和俱乐部数据，避免不必要的重复请求
useEffect(() => {
  Promise.all([loadAllGames(), loadAllClubs()]);
}, [])

const loadAllClubs = () => {
  getAllClubs()
  .then((data) => {
    setClubs(data);
    // 处理games数据，替换ID为名称
    setGames(prevGames => prevGames.map(game => {
      const homeClub = data.find(club => club.id === game.home_team);
      const awayClub = data.find(club => club.id === game.away_team);
      return {
        ...game,
        home_team: homeClub?.name || game.home_team,
        away_team: awayClub?.name || game.away_team
      }
    }));
  })
  .catch((error) => console.log(error))
}

额外优化点 #

• 给map渲染的元素添加唯一key（比如game.id），符合React的渲染规范
• 用Promise.all同时加载游戏和俱乐部数据，减少异步请求的等待时间
• 可选：用useMemo缓存处理后的游戏列表，避免每次渲染重复执行查找逻辑：

const processedGames = useMemo(() => {
  return games.map(game => {
    const homeClub = clubs.find(club => club.id === game.home_team);
    const awayClub = clubs.find(club => club.id === game.away_team);
    return {
      ...game,
      home_team: homeClub?.name || game.home_team,
      away_team: awayClub?.name || game.away_team
    }
  })
}, [games, clubs])

// 渲染时使用processedGames
{processedGames.map((game) => (...))}

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