React JS 映射/显示元素答案

【问题标题】：React JS mapping / displaying elementsReact JS 映射/显示元素
【发布时间】：2020-09-14 18:27:00
【问题描述】：

所以我试图将播放器数组作为道具传递给 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')
);

【问题讨论】：

您正在将道具“玩家”之一传递给应用组件，但不是初始玩家。使用 'console.log('props are ', props) 在 App 组件中调试。这样你就会知道 App Component 的 props 中都有什么。
'console.log('props are ', props) 产生错误，提示未定义 props
尝试作为传递并检查 console.log('props are ', props)
我完成并收到了这个：'props' is not defined no-undef

标签： javascript reactjs mapping react-props

【解决方案1】：

喂，

你传递的道具是名字players，你为什么要打电话给initialPlayers？

试试这个：

props.players.map

【讨论】：

嘿，当我做 props.players.map: TypeError: Cannot read property 'players' of undefined.
console.log(players) 确实返回了数组

【解决方案2】：

尝试如下修改：

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

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

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

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

【讨论】：