Question

您好我正在解析嵌套数组，但是获取了ReferenceError：未定义播放器。我有状态变量播放器，它是json数组，如下所示：

[
  {
    "game": "badminton",
    "players": [
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      }
    ]
  },
  {
    "game": "football",
    "players": [
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      },
      {
        "name": "Hitesh",
        "url": "https://i.imgur.com/aBpM49y.jpg",
        "points": "1034.67",
        "rank": "1",
        "profile": "/hitesh"
      }
    ]
  }
]

我在渲染函数中解析它并为我的视图创建基于卡片的UI元素，如下所示：

render(){
  //  console.log(this.players);
    var topplayers=[];
    this.state.players.map(function(game,index){
      topplayers.push(<div class="row" style={styles.row}>
        <div class="col">
          {game.game} Legend in Bangalore
        </div>
      </div>);
      const row=<div class="row">;
      topplayers.push({row});
      game.players.map(function(player,index){
        topplayers.push(<div class="col">
          <div class="card">
            <img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
            <div class="card-body">
              <h4 class="card-title">{player.name}</h4>
              <div >
                <div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
                <div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
              </div>
              <a href="{player.profile}" style={styles.profile} class="btn btn-primary">View Profile</a>
            </div>
          </div>
        </div>)
      }
    )
      const rowend=</div>;
      topplayers.push({rowend})
    }
    )

    return(
      <div>
        {topplayers}
      </div>
    );
  }

但是我收到错误ReferenceError：未定义播放器。有人可以帮助我在哪里弄错了。

Answer 1

问题是声明的const变量 const row=<div class="row">这里，div标记了html和
的开头 const rowend=</div>;这是结束标记。

所以，介于两者之间的所有东西都被认为是普通的HTML。 map函数不是一个函数，而是简单的html。这就是为什么当玩家被放入{}时，javascript正试图找到不存在的变量。

基本上，在你的代码中; <div class="row">和</div>之间的所有内容都被视为html

要使其工作，您需要将代码重组为以下内容：

render(){
//  console.log(this.players);
  var topplayers=[];
  this.state.players.map(function(game,index){
  topplayers.push(<div class="row" style={styles.row}>
    <div class="col">
      {game.game} Legend in Bangalore
    </div>
  </div>
  );
  const row=<div class="row">
    {game.players.map(function(player,index){
      return (<div class="col">
        <div class="card">
          <img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
          <div class="card-body">
            <h4 class="card-title">{player.name}</h4>
            <div >
              <div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
              <div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
            </div>
            <a href="{player.profile}" style={styles.profile} class="btn btn-primary">View Profile</a>
          </div>
        </div>
      </div>)
      })
    }
  </div>;
  topplayers.push(row)
})

return(
  <div>
    {topplayers}
  </div>
);
}

在这里，我移动了<div class="row"> and </div>中包含的{}中的game.players.map。这将确保像功能一样工作。我没有将结果推送到数组中，而是直接从map函数返回值，这些值将在所需的div之间注入。

希望你理解。
如有任何疑问，请回复

嵌套数组解析

1 个答案: