Question

React JS 映射/显示元素

2020-05-27

54

javascript reactjs mapping react-props

因此，我尝试将播放器数组作为道具传递给 App 组件，然后使用映射来迭代 initialPlayers 并为数组中的每个对象返回一个播放器组件。请检查下图。

这是 App.js 页面。 ReactDOM.render 在 index.js 中。

我收到此错误：

TypeError：无法读取未定义的属性“initialPlayers”

有什么好的快速建议吗？

谢谢

class App extends Component {
constructor(props) {
    super(props);
    this.state = {};
}

render() {

    const players = [

        { name: "Dex",
            score: 33
        },
        {
            name: "Rocko",
            score: 61
        },
        {
            name: "Lance",
            score: 29
        },
        {
            name: "Zane",
            score: 42
        },

    ];


ReactDOM.render(
  <React.StrictMode>
    <App players />,
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

你好，

你传递的 props 是名称 players ，为什么尝试调用 initialPlayers ？

试试这个：

props.players.map

Answer 2

尝试像这样修改：

ReactDOM.render(
  <React.StrictMode>
    <App players={players} />,
  </React.StrictMode>,
  document.getElementById('root')
);

按照您编写代码的方式， players 将像属性而不是 prop 一样被评估。

此外，我建议您在迭代地图之前检查您的 prop.initialPlayers，因为它可能未定义（在您的情况下，您因为命名而遇到这些错误 -> 它应该是 players 而不是 initialPlayer 或反之亦然），例如，您可以编写类似以下内容：

{(props.players || []).map(etc.)}