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

IT技术 javascript reactjs
2021-05-09 22:28:18

我正在GET向两个不同的 url发出两个请求，它们返回不同的数据。然后我试图将返回的值设置为一个名为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));
    }

2个回答

您可以使用 Promise.all() 方法等待所有 Promise 的解析，然后一次性处理结果。这也意味着您只调用 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
      )}
    });
}

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

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

PS：我还建议参加关于 Udemy 的 Stephen Grider 课程，非常好的东西，他在本课程https://www.udemy.com/react-redux/上完全按照您的意思去做 ，他等待使用该库解析的值，然后他显示它。

其它你可能感兴趣的问题
上一篇如何获取用户的位置 - 在 React Map GL 使用 下一篇在 React / Nextjs 的文件夹中导入多个文件