映射不返回值的数组

Question

我有一个试图从中映射值的数组，但它没有返回我需要继续我的项目的内容。

有问题的代码块是：

<select
    className={"clubsList"}
    defaultValue={"allClubs"}
    onChange={this.handleClubChange}>
    <option key={"allClubs"} value={"allClubs"}>All Clubs</option>
    {LEAGUE_IDS_NAMES.forEach(league => {
        if (league.id == this.props.fantasyLeagueId) {
            league.clubs.map(club => {
                console.log('club:', club.name);
                return <option key={club.name} value={club.name}>{club.name}</option>;
            });
        }
    })}
</select>

这样做的目的是显示俱乐部名称列表。 LEAGUE_IDS_NAMES 是一个导入的文件，它是一个对象数组。这些对象是足球联赛，每个联赛的其中一个键是clubs，它又是一个对象数组，如下所示：

clubs: [
    {name: 'Club Name1'},
    {name: 'Club Name2'},
    ...
]

我正在使用 React/Redux 保持联赛 ID 处于状态，然后使用它与数组中的每个联赛对象进行比较，检查每个联赛对象的 ID。如果匹配，它应该给我返回声明。我知道我正在正确访问俱乐部名称，因为 console.log 正确地为我提供了该州联赛 ID 的俱乐部名称。它没有做的是给我<option> 的一部分。

为了进行实验，我在league.clubs.name 行前面扔了一个return，但仍然没有。对于这个<select>，我唯一看到的是“所有俱乐部”<option>。

有什么想法吗？

Answer 1

问题是你不能从forEach 中产生任何东西。

鉴于其唯一来自特定联赛的俱乐部，您可以过滤联赛，然后映射俱乐部，例如

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

由于您遵循 Redux 模式，您可以将过滤器移到选择器中。