Question

一切正常，直到我添加初始的players.map箭头功能步骤在第52行（Players List注释）上实现。记分板应该使用播放器的数组在其下显示名称值，当我使用开发工具检查元素时，一切都会显示出来，直到这一步，也许这是我没有看到5倍视频的原因。

以下是该网站的链接：https://codingoni.github.io/React-Project/ 链接到代码：https://github.com/CodingOni/React-Project

我尝试过多次查看语法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>
    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="app.js"></script>
  </body>
</html>


const players = [
  {
    name: "Guil",
    score: 50
  },
  {
    name: "Treasure",
    score: 85
  },
  {
    name: "Ashley",
    score: 95
  },
  {
    name: "James",
    score: 80
  }
  ];
  const Header = (props) => {
    return(
      <header>
          <h1>{props.title}</h1>
              <span className="stats">Player: {props.totalPlayers} </span>
      </header>
    );
  }


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


  const Counter = (props) => { 
      return( <div className="counter">
  <button className="counter-action decrement">-</button>
             <span className="counter-score">{props.score}</span>
             <button className="counter-action increment">+</button>
             </div>
            );
  }

  const App = (props) =>{ 
      return( 
          <div className="scoreboard">
          <Header title="Scoreboard" totalPlayers={"1"}/>  
  //      {Players List*/}
        {props.initialPlayers.map( player =>
         <Player 
        name={player.name}
        score={player.score}
        /> 
      )}

          <Player name="Tyrique" score={20} /> 
          <Player name="Tyrique" score={30} /> 
          <Player name="Tyrique" score={10} /> 
          <Player name="Tyrique" score={15} /> 

          </div> ); } 

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

要显示在黑板上的名称和分数

Answer 1

也许尝试：

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

我的应用程序中的箭头功能遇到问题

1 个答案: