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。如果它匹配，它应该给我return语句。我知道我正在正确访问俱乐部名称，因为console.log正确地给了我俱乐部名称的州联盟身份证。它没有做的就是给我<option>部分。

为了进行实验，我在return行前面扔了league.clubs.name，但仍然没有。我唯一看到的<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模式，因此您可以将过滤移动到选择器中。

映射数组不返回值

1 个答案: