异步映射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 +反应

回答

相关问题