Javascript 无法读取React jsx中未定义的属性“map”

我正在通过react教程学习react，我得到了一个map Unfind错误。我该怎么办？ 我试图在数组上迭代以在播放器组件中显示数组的数据，但仍然会出现此错误。我试着在线搜索并查看堆栈溢出上的其他映射未定义错误，但没有一个像我遇到的问题那样

const players = [
  {
    name: "Guil",
    score: 50
  },
  {
    name: "Treasure",
    score: 85
  },
  {
    name: "Ashley",
    score: 95
  },
  {
    name: "James",
    score: 80
  }

];

const Player = (props) => {
  return (
    <div className="player">
      <span className="player-name">
        {props.name}
      </span>

      <Counter score={props.score} />
    </div>
  );
}

const App = (props) => {
  return (
    <div className="scoreboard">
      <Header 
      title="Scoreboard"
      totalPlayers={4}
      />

      {/* Players list */}
      {props.initialPlayers.map(player =>
        <Player
        name={props.name} 
        score={props.score}
        />
        )}


    </div>
  );
}

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

export default App;

---

考虑到您没有给我们错误消息，我不能确定什么是真正未定义的，尽管我怀疑map是未定义的

在下面的代码段中，您试图访问上下文中不存在的props.name和props.score。您已经在map回调中调用了player，因此需要访问它

i、 e.将props.name和props.score更改为player.name和player.score

---

看起来cubrr的评论可能已经确定了您遇到的问题。您可能会在此处遇到错误：

const App = (props) => {
  return (
    <div className="scoreboard">
      <Header 
      title="Scoreboard"
      totalPlayers={4}
      />

      {/* Players list */}
      {props.initialPlayers.map(player =>
        <Player
        name={props.name} 
        score={props.score}
        />
        )}
    </div>
  );
}

由于props.name=undefined，您正在尝试渲染不存在的内容。您需要将其更改为：

{props.initialPlayers.map(player =>
  <Player
    name={player.name} 
    score={player.score}
  />
)}

希望有帮助

---

React在为您提供错误日志方面相对较好，请务必查看错误日志，它会告诉您错误发生在哪一行。

错误发生在哪一行？我在当前代码段中看到的唯一问题可能是，将错误消息作为引号复制到问题中也很方便。我尝试过，但它不起作用，在错误日志中，它说错误在第61Elisha行，如果您能够发送错误代码段，那将是最好的。这将帮助调试变得更容易。

{props.initialPlayers.map(player =>
  <Player
    name={player.name} 
    score={player.score}
  />
)}