嵌套数组解析

debugcn 发表于 Dev

海特什

嗨，我正在解析嵌套数组，但得到 ReferenceError: player is not defined 。我有状态变量播放器，它是 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: player is not defined 。有人可以帮助我，我哪里出错了。

苏尼尔·乔杜里

问题是声明的 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>
);
}

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

希望你能理解。
如有疑问请回复

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。