要素form array.mapはレンダリングしません

Question

私の状態（配列）から要素をレンダリングしようとしていますが、画面上にレンダーしたくありません。私がconsole.log(b.name)を実行すると、コンソールに自分の名前が記録されます。

renderAllElements() { 
    this.state.myData.map(b => { 
     return(
      <div> 
       <h4>{b.name}</h4> 
      </div> 
     ) 
    }) 
} 

render() { 
    return (
     <div> 
      {this.renderAllElements()} 
     </div> 
    ) 
} 

Answer 1

あなたのマップをバック返却する必要があります。

renderAllElements() { 
    return this.state.myData.map(b => { 
     return(
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    ) 
    }) 
} 

Answer 2

あなたは正しくレンダリング方法であなたのrenderAllElements()機能を呼び出しています。また、配列変数を正しくマップしているようですが、マッピングが完了したらレンダリングするために関数は何も返しません。

単にあなたのmap関数の戻りを追加し、それが動作するはずです：

renderAllElements() { 
    return this.state.myData.map(b => { 
     return(
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    ) 
    }) 
} 

ワンライナーの代替：

renderAllElements() { 
    return this.state.myData.map(b => <div><h4>{b.name}</h4></div>); 
} 

Answer 3

あなたはすでにあなたが代わりに中括弧なしでそれを書き換えることができます配列関数を使用しているので：

renderAllElements =() => (
    this.state.myData.map(b => (
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    )); 
) 

したがって、return文について覚えておく必要はありません。