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

Question

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

--main
  |--menubar
  |--articles

这是项目的 codepen。

我这里有两个问题。

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

2.) 在 API 调用中，我定义为只获取前 20 个帖子。但是，当我单击 news 时，我每次都会收到随机数 (<20) 个帖子。这是为什么？由于 API 调用相同，它不应该呈现相同数量的（20）个帖子吗？为什么不同？

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

Answer 1

实际上是因为异步，我使用 async library 编辑了它编辑了 fetchdata() 并添加了 getItems().

使用 map 的优点是它会 return 一个结果数组本身，所以我们不需要维护一个数组。

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

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

How to make to make sequential async calls and pass data to a sibling component properly?

javascript

asynchronous

fetch

async.js

reactjs