React - 结合数据返回两个 api 调用并使用这些值设置数组的状态

Question

我正在向两个不同的 url 发出两个 GET 请求，它们返回不同的数据。然后我尝试将返回的值设置为数组的值，称为artists。

我不确定合并从 API 调用返回的值的最佳方法。

如果需要更多信息，请告诉我。

我不能 100% 确定的一件事是以下是否意味着结果是一个数组。还有，我是否应该在我的 componentShouldMount 方法中使用 Promise。

var result = data.result.posts;
this.setState({
  artists: result
})

我的代码如下：

  getInitialState: function() {
      return {
        artists: [], 
        isLoaded: true
      }
    },

    componentDidMount: function() {
      $.get(PostsOneURL, function(data) {
        var result = data.result.posts;
        this.setState({
          artists: result
        })
      }.bind(this));

      $.get(PostsTwoURL, function(data) {
        var result = data.result.posts;
        this.setState({
          artists: result,
          isLoaded: true
        })
      }.bind(this));
    }

Answer 1

您可以使用 Promise.all() 方法等待所有承诺的解决，然后一次性处理结果。这也意味着您只需调用一次 setState()，就可以停止不必要的组件重新渲染。

componentDidMount: function() {
  const requestOne = $.get(PostsOneURL);
  const requestTwo = $.get(PostsTwoURL);

  Promise.all([requestOne,requestTwo])
    .then(requestData => {
      this.setState({
        artists: requestData.map(data => data.result.posts)
        isLoaded: true
      )}
    });
}

Answer 2

我不是反应专家，但我可以帮助你。如果您使用的是 redux，只需使用 https://www.npmjs.com/package/redux-promise，它会为您提供解析后的值，而无需您提供任何东西。它是一个中间件，可以保证没有任何东西在没有被解决的情况下到达减速器。另一方面，如果您使用的是 vanilla react，您可以自己创建自己的中间件来处理它们，但是您需要确保值到达 reducer 解析以产生正确的状态。对于第二种方法，您只需等待 promise 解决，然后执行调度以返回中间件链的开始，并且在第二次执行中间件时，值将被解决。

记住不要改变状态，生成一个新对象 {...state, thingsyouwanttoadd }。

P.S：我还建议参加关于 Udemy 的 Stephen Grider 课程，非常好的东西，他在这门课程https://www.udemy.com/react-redux/ 上做的正是你想要做的事情，他等待值与该库一起解决，然后他展示它。