reactjs json与分层数据

Question

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

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

这样做的最终目标是我想有一个列表输出嵌套的数据，与主要的一致。

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

这是因为主要是一个数组，你把它当作对象。 改为尝试此操作。

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