異步映射ES6 +反應

-1

我想做異步迭代器.map，但我不知道它是如何正確完成的。我有這個異步映射ES6 +反應

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} 
)

如果我讓地圖上的變量「X」可以正常工作，正確描繪，但如果我把它this.props.letters跳到一個錯誤說this.props.letters.map不一個函數。我怎麼能做到這一點異步？

來源

2017-09-01 jmrosdev

這是非常模糊的。你是什麼意思的異步？「信件」列表是否填滿了這個方式，或者你是什麼意思？在不知道數據如何進入的情況下，很難給出建議 –

請參閱[*我如何提出一個好問題？*]（/ help/how-to-ask）我們無法在此基礎上爲您提供幫助你在問題中提供了什麼，因爲你沒有顯示填充'this.props.letters'的異步過程。錯誤信息也很有趣，因爲它告訴我們'this.props.letters' **不是**'null'或'undefined'，但它不是一個數組，所以... –

@MarioF數據來自一個API，我想繪製tr異步。我如何使地圖異步工作？ – jmrosdev

-1

console.log不是很值得信賴，它可以向你展示props.letters有價值，但很可能是你的render（）方法被觸發的時候this.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> 
    ); 
}

來源

2017-09-01 11:15:12 0xRm

嗯......我得到同樣的錯誤... this.props.letters.map不是函數 – jmrosdev

那麼這意味着無論在this.props.letters不是一個數組。 – 0xRm

異步映射ES6 +反應

回答

相關問題