我面临着与 this question 非常相似的问题,但我正在使用 Promise 获取数据,并希望在数据通过时将其呈现到 DOM 中。 console.log()
正确显示所有项目。我认为我的问题是 lodash.map 返回 <li>
的数组元素,所以我试图调用 this.renderItems()
为了呈现(但 renderItems()
似乎不存在)。我在做一些非常规的事情吗,有没有更简单的方法,有没有等效的功能来替换我的 renderItems()
?
renderArticleHeadline: function(article) {
console.log('renderArticleHeadline', article.headline);
return (
<li>
{article.headline}
</li>
)
},
render: function() {
return (
<div>
<ul>
{
this.renderItems(
this.fetchFrontPageArticles().then(data => {
lodash.map(data, this.renderArticleHeadline)
})
)
}
</ul>
</div>
);
}
最佳答案
应该是这样的
getInitialState: function() {
return {
items: []
};
},
renderArticleHeadline: function(article) {
return (
<li>
{article.headline}
</li>
);
},
componentDidMount: function() {
this.fetchFrontPageArticles().then(data => {
this.setState({
items: data
});
});
},
render: function() {
var items = lodash.map(this.state.items, this.renderArticleHeadline);
return (
<div>
<ul>
{items}
</ul>
</div>
);
}
附言阅读 thinking in react
关于javascript - 从 map 返回的 React 渲染数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29446252/