非同期マップES6 +反応

Question

イテレータ.mapを非同期で実行したいのですが、どのように正しく行われたのかわかりません。私は変数「x」は正しく動作オーバーマップを作成し、それを正しく塗る場合、私はこの

async componentDidMount() { 
    await this.props.existingLettersActions.fetchExistingLetters();   
} 

render() { 
var example= ''; 
    var x = [ 
     { 
      id: 1, 
      name: 'asdf' 
     }, 
     { 
      id: 2, 
      name: 'asdf' 
     } 
    ] 
    if (this.props.letters) { 
     example = this.props.letters.map(function(item, i) { 
      return (
       <tr key={i} styleName="container"> 
        <td>{item.id}</td> 
        <td>{item.name}</td> 
       </tr> 
      ); 
     }); 
    } 
} 

return (
    {example} 
) 

を持っていますが、私はthis.props.lettersを置けば、それはthis.props.letters.mapがないというエラーをジャンプ機能。私はこの非同期をどのようにすることができますか？

Answer 1

console.logは信頼できるものではありませんが、props.lettersに値があることを示すことができますが、render（）メソッドがトリガされた瞬間である可能性があります.props.lettersにはまだ値が設定されていませんデータ付き。

初めてコンポーネントをレンダリングするとき、this.props.lettersは定義されていない（または同様の）ことがあります。このため

が、それはあなたがレンダリングする前に反復処理したい小道具をチェックすることをお勧めし、何かのように：非常にあいまいである

render() { 
    if(!this.props.letters) { 
     return <div>Loading...</div> 
    } 

    return this.props.letters.map((item) => 
     <tr key={item.id} styleName="container__body__table__body"> 
      <td>{item.id}</td> 
      <td>{item.name}</td>       
     </tr> 
    ); 
}