Question

我试图了解如何使用React和地图技术调用json数据。我特别难以获取分层数据。在下面的示例json代码中，这将是side下的内容。

原样，我的第一个return语句有效。也就是说，我能够检索内容为dish的列表。但是，我的第二个return语句返回一个错误，其中地图无法定义我的呼叫内容，或side。

这样做的最终目标是我希望有一个列表输出与main重合的嵌套数据。

getInitialState:function(){
  return {fulldata: {main:[{side:[]}]}}
},

componentDidMount:function(){
  var self = this;
  $.getJSON('https://yooarel.com', function(resultes){
  self.setState({fulldata: resultes});
  }); 
},

render:function(){
  var self = this;
  return (<div>
    <ul>
    {this.state.fulldata.main.map(function(break, i){
    return <li key={i}>{break.dish}</li>})}
      <ul>
      {this.state.fulldata.main.side.map(function(make, o){
        return <li key={o}>{make.platter}</li>)}}
      </ul>
    </ul>
</div>);
}

同时我假设的yooarel JSON文件看起来像这样：

{
  "main": [
    { "dish": "steak",
      "side": [
       {"platter": "yogurt"},
       {"platter": "popcorn"}
      ]
    },
    { "dish": "fish",
      "side": [
      {"platter": "salad"}
      ]
    }
  ]
}

Answer 1

这是因为main是一个数组，你将它视为对象。试试这个。

{
   this.state.fulldata.main.map(function(m,i){
     return m.side.map(function(make, o){
       return <li key={o}>{make.platter}</li>)}
     }
   })
 }

reactjs json与分层数据

1 个答案: