Question

我想做异步迭代器.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}
)

如果我将地图放在变量＆＃39; x＆＃39;正确工作并正确绘制它，但如果我把this.props.letters它跳转错误说this.props.letters.map不是一个函数。我怎么能这样异步？

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

异步映射ES6 + React

1 个答案: