reactjsは

Question

私はそうのような読み込み架空のJSONファイルを持っています。私は私が持っているdishesの異なる種類を示しています<ul li>ブロックを配置しようとしています

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

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

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

次のように私のコードの残りの部分は組織化されています。そして、私のliブロックの下に各皿のために、私はまた、各皿の下に異なるplatterを示していますul liブロックを配置しようとしています。これは私のrundmc()の機能の下で達成しようとしているものです。

私のコードは、そのまま私のul ul liブロックの下にあるすべての大皿を示しています。私はそれぞれのdishに対して適切なplatterだけを出力する方法がわかりません。

Answer 1

、あなたは、パラメータとして、現在の皿を渡し、側面のみ配列

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

Answer 2

たぶん、あなたはmap関数の値を返すされていませんか？

{this.state.fulldata.main.map(function(m, i){ 
    return (
    <li key={i}> 
     <span>{m.dish}</span> 
     {self.rundmc()} 
    </li> 
) 
})} 

編集：rundmcメソッドを見ていませんでしたか？ dieduが示しているように、内部にマップしたい実際の値を渡す代わりに、同じ配列を再度マッピングしています。あなたにもrundmc関数内のすべてのデータを反復している

Answer 3

を反復処理する必要があり、私はこの方法を使用しないことをお勧めしたいですマップをネストするのはとても簡単なので、レンダリングするたびにReactが各子のために新しい関数を作成する必要もありません。ここでは例です：

const json = { 
 
\t "main": [{ 
 
\t \t "dish": "steak", 
 
\t \t "side": [{ 
 
\t \t \t "platter": "yogurt" 
 
\t \t }, { 
 
\t \t \t "platter": "popcorn" 
 
\t \t }] 
 
\t }, { 
 
\t \t "dish": "fish", 
 
\t \t "side": [{ 
 
\t \t \t "platter": "salad" 
 
\t \t }] 
 
\t }] 
 
} 
 

 
class Example extends React.Component { 
 
    
 
    render() { 
 
    return(
 
     <ul>{json.main.map((main, i) => (
 
     <li key={i}> 
 
      {main.dish} 
 
      <ul>{main.side.map(side => <li>{side.platter}</li>)}</ul> 
 
     </li>))} 
 
     </ul> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>