异步映射 ES6 + React答案

【问题标题】：Async map ES6 + React异步映射 ES6 + React
【发布时间】：2017-09-01 11:03:23
【问题描述】：

我想做一个异步迭代器 .map 但我不知道它是如何正确完成的。我有这个

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 不是一个函数。我怎么能做到这一点异步？

【问题讨论】：

那很模糊。你说的异步是什么意思？ letters 列表是这样填写的，还是你的意思？在不知道数据如何进入那里的情况下，很难给出建议
请参阅How do I ask a good question? 根据您在问题中提供的内容，我们无法为您提供帮助，因为您没有显示填充this.props.letters 的异步过程。错误信息也很耐人寻味，因为它告诉我们this.props.letters 不是 null 或undefined，但它也不是一个数组，所以...
@MarioF 数据来自 api，我想异步绘制 tr。如何使地图异步工作？
@T.J.Crowder 数据来自 api，我想异步绘制 tr。如何使地图异步工作？
@jmrosdev：你不能，map 不是为异步使用而设计的。您可以做其他件事，但它们取决于您未提供的信息。再次：向我们展示您正在处理的内容，我们可以提供帮助。如果你不这样做，我们就不能。请使用 Stack Snippets（[<>] 工具栏按钮）通过 runnable minimal reproducible example 演示问题（可能使用 setTimeout 模拟异步数据填充）更新您的问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.

标签： javascript reactjs ecmascript-6

【解决方案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>
    );
}

【讨论】：

Uhmmm...我得到同样的错误... this.props.letters.map 不是函数
那么这意味着 this.props.letters 中的任何内容都不是数组。