Question

目标

我有一个功能组件，它仅用于显示存储在 Redux 状态中的数组中的姓名（玩家）列表。它开始是空的，但是当用户按下另一个组件的按钮时，该数组会将值推入其中。

将按钮存储在单独组件中的原因是在 MVP 之后，该按钮将被移动到不同的父组件中。

列出播放器的组件位于名为 PlayersCardT1 的文件夹和文件中，并导出名为 Players 的函数。


import RowPlayer from '../RowPlayer';

const Players = (props) => {

    return (
        <ul>
        {
            props.players.map(player => (
                <RowPlayer name = { player } key = { player.id } />
            ))
        }
    </ul>
    )
}

export default Players;

RowPlayer 是一个简单的组件，它只输出一个 <p>{ name }</p>。

index.js 包含：


import { connect } from 'react-redux';
import Players from './PlayersCardT1';

const mapStateToProps = state => {
    return {
    players: state.players
    };
};

export default connect(mapStateToProps)(Players);

错误

我收到以下错误： TypeError: Cannot read property 'map' of undefined

尝试解决方案

我尝试将地图放入条件中，但是 React 抱怨该组件不返回任何内容，并添加 return null，所以我这样做了：


if (props.players) { //Edit to remove typo from demo'd solution attempt
    return (
        <ul>
        {
            props.players.map(player => (
                <RowPlayer name = { player } key = { player.id } />
            ))
        }
    </ul>
    )
}
return null;

这会阻止错误发生，但列表永远不会填充，即使我按下将名称添加到数组的按钮也是如此。我可以在我的 Redux 开发工具中看到状态玩家数组在其中获得名称，但没有变化。

现在不知道该怎么做。

Answer 1

有一个更好的方法，您可以使用新的 ES6 特性检查条件。

    return (
        <ul>
        {
            props?.players?.map(player => (
                <RowPlayer name = { player } key = { player.id } />
            ))
        }
    </ul>
    )

Answer 2

问题在这里：

if (props.player) {

这里您检查的是 player 而不是 players。所以改成：

if (props.players) {

然后再试一次。

Answer 3

事实证明它是正确完成的，但是文件被错误地导入到其父组件中，因为我的自动导入无法跟上我移动文件的速度

Answer 4

我不知道 redux 但在反应的情况下，如果像这样初始化数组，它会给出未定义的错误 不正确

thi.state={
players:"",
}

正确

this.state={
players:[]
}

工作正常，我受到给定资源的限制

React-Redux：无法读取未定义的属性“地图”

目标

错误

尝试解决方案

4 个答案: