从地图返回的 React 渲染数组

Question

我面临着与 this question 非常相似的问题，但我正在使用 Promise 获取数据，并希望在数据通过时将其呈现到 DOM 中。 console.log() 正确显示所有项目。我认为我的问题是 lodash.map returns 一个 <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>
      );
   }

Answer 1

应该是这样的

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

P.S。阅读 thinking in react

从地图返回的 React 渲染数组

React render array returned from map

javascript

dictionary

promise

lodash

reactjs