React数组映射未返回<option>元素，页面仅显示默认选项求助

你遇到的核心问题是误用了forEach遍历数组——forEach的设计只是用来执行循环内的逻辑，它不会返回任何值，哪怕你在里面写了map和return，最终也不会把生成的<option>元素传递给JSX渲染。这就是为什么控制台能打印出俱乐部名称，但页面上看不到对应的选项。

下面给你两种可行的解决方法：

方法一：先找到目标联赛再渲染（更简洁清晰） #

先通过find方法从LEAGUE_IDS_NAMES中匹配到对应fantasyLeagueId的联赛对象，再直接对该联赛的clubs数组做map渲染：

<select className={"clubsList"} defaultValue={"allClubs"} onChange={this.handleClubChange}>
  <option key={"allClubs"} value={"allClubs"}>All Clubs</option>
  {/* 先找到匹配的联赛，存在时再渲染俱乐部选项 */}
  {LEAGUE_IDS_NAMES.find(league => league.id === this.props.fantasyLeagueId)?.clubs.map(club => (
    <option key={club.name} value={club.name}>{club.name}</option>
  ))}
</select>

这里用了可选链操作符?.，如果找不到匹配的联赛，会直接返回undefined，React会忽略它，避免报错。如果你项目不支持可选链，也可以用&&做短路判断：

{
  const targetLeague = LEAGUE_IDS_NAMES.find(league => league.id === this.props.fantasyLeagueId);
  targetLeague && targetLeague.clubs.map(club => (
    <option key={club.name} value={club.name}>{club.name}</option>
  ))
}

方法二：替换forEach为map遍历 #

如果你想保持遍历整个LEAGUE_IDS_NAMES的逻辑，把forEach换成map，并且在匹配时返回clubs.map的结果，不匹配时返回null（React会自动忽略null）：

<select className={"clubsList"} defaultValue={"allClubs"} onChange={this.handleClubChange}>
  <option key={"allClubs"} value={"allClubs"}>All Clubs</option>
  {LEAGUE_IDS_NAMES.map(league => {
    if (league.id === this.props.fantasyLeagueId) {
      // 匹配时返回俱乐部选项数组
      return league.clubs.map(club => (
        <option key={club.name} value={club.name}>{club.name}</option>
      ));
    }
    // 不匹配时返回null，不渲染任何内容
    return null;
  })}
</select>

额外优化建议 #

如果你的club对象有唯一的id字段，建议把key设置为club.id而不是club.name——毕竟有可能出现重名的俱乐部，用唯一id能避免React渲染时的key冲突问题。

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