reactjs jsonとレイヤードデータ

Question

Reactとマップテクニックを使用してjsonデータを呼び出す方法を理解しようとしています。特にレイヤードデータの取得に問題があります。下の私の例のjsonコードでは、これはsideの下の内容になります。

私の最初のreturn文が機能します。つまり、dishの内容のリストを取得できます。しかし、私の2番目のreturn文は、マップが自分の呼び出しの内容を定義できないというエラーを返すか、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>)} 
    } 
    }) 
}