如何进行顺序异步调用并将数据正确传递给兄弟组件？

Question

我正在尝试构建一个hackernews 克隆作为reactjs 的练习。在这里，我尝试仅使用 react 构建它，稍后我将使用 Redux 构建它。 这是我的组件结构。

--main
  |--menubar
  |--articles

这是项目的codepen。

我有两个问题。

1.) 这里我通过状态和道具传递数据。我在menubar 组件上调用componentDidMount 方法中的API，并通过main 组件将其传递给articles 组件。但是当它在componentWillReceiveProps 方法中通过props 接收数据时，它不会呈现列表。要渲染它，我必须单击News（它与获取数据无关，它只是打印一个日志）这将调用 API 方法。通过props接收数据并设置数据时，如何渲染this.state.articleList中的数据。

2.) 在 API 调用中，我已定义仅获取前 20 个帖子。但是当我点击news 时，我每次都会得到随机数量的（

这两个问题是因为异步方法吗？如果是这样，我该如何解决？

Answer 1

其实是因为异步，我用async library编辑了fetchdata()并添加了getItems()。

使用map的好处是它自己会返回一个结果数组，所以我们不需要维护一个数组。

var async = require("async");

fetchdata() {
fetch("https://hacker-news.firebaseio.com/v0/topstories.json")
  .then(res => res.json())
  .then(data => {
    this.setState({ storyList: data }, () => {
      this.getItems(this.state.storyList);
    });
  })
  .catch(err => console.log(`Error fetching data : ${err}`));
  }


getItems(storyList) {
    async.mapLimit(storyList, 10,
      function(item, callback) {
        console.log(item);
        fetch(`https://hacker-news.firebaseio.com/v0/item/${item}.json`)
          .then(res => res.json())
          .then(data => {

            //pass the data here
            callback(null, data);
          });
      },
      function(err, dataArray) {
        if (err) {
          console.error(err.message);
        } else {

          //dataArray will contain an array of results from map
          this.props.getData(dataArray);
        }
      }
    );
  }

Answer 2

Hi after getting the data inside getItems binding the data to callback getData as follows

getItems(storyList) {
    var story_list = [];
    async.mapLimit(
        storyList,
        10,
        ((item, callback) =>{
            console.log(item);
            fetch(`https://hacker-news.firebaseio.com/v0/item/${item}.json`)
                .then(res => res.json())
                .then(data => {
                    story_list.push(data);
                    this.props.getData(story_list);
                });
        }),
            ((err) =>{
            if (err) {
                console.error(err.message);
            } else {
                this.props.getData(story_list);
            }
        })
    );
}