关于javascript：React – 组合数据返回两个api调用并使用这些值设置数组的状态


React - Combine data returned two api calls and set state of an array with these values

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

我不确定将API调用返回的值组合起来的最佳方法。

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

我不能100％确定的一件事是，以下是否结果是数组。 而且，我是否应该在我的componentShouldMount方法中使用promises。

1
2
3
4
var result = data.result.posts;
this.setState({
  artists: result
})

我的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  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));
    }

相关讨论

您可以使用Promise.all()方法等待所有promise的解析，然后一次性处理结果。这也意味着您只调用一次setState()，停止对组件进行不必要的重新呈现。

1
2
3
4
5
6
7
8
9
10
11
12
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
      )}
    });
}
相关讨论

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

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

PS：我还建议参加Udemy的Stephen Grider课程，非常好的东西，他确实在这个课程上做了你想做的事https://www.udemy.com/react-redux/，他等待着要使用该库解析的值，然后他会显示它。