ReactJS中处理多个AJAX调用的状态更新与重渲染问题咨询

这个问题我之前也碰到过，核心问题就是两个请求都在更新同一个userOrganizations状态字段，后返回的响应会直接覆盖先返回的；同时每次调用setState都会触发组件重渲染，导致两次不必要的渲染。下面给你几个可行的解决思路：

1. 拆分状态字段，避免覆盖 #

最直接的办法是把组织数据和用户数据分别存在不同的状态字段里，这样两个请求的更新就不会互相干扰。虽然还是会触发两次重渲染，但如果你的组件可以分别处理这两部分数据的展示（比如先展示组织列表，等用户数据到了再更新另一部分），这种方式简单易实现：

componentDidMount() {
  // 获取组织数据，更新单独的状态字段
  getOrganizationsForUserTemp().then((organizations) => {
    this.setState({ organizations });
  });

  // 获取用户数据，更新另一个状态字段
  getUsersOfOrganizationTemp().then((users) => {
    this.setState({ organizationUsers: users });
  });
}

之后在渲染的时候，分别从this.state.organizations和this.state.organizationUsers取数据即可。

2. 使用Promise.all并行请求，一次更新状态 #

如果你的组件需要等两个请求都完成后再渲染，或者想减少重渲染次数，可以用Promise.all把两个请求合并，等所有请求都成功返回后再一次性更新状态，这样只会触发一次重渲染：

componentDidMount() {
  // 并行发起两个请求
  Promise.all([
    getOrganizationsForUserTemp(),
    getUsersOfOrganizationTemp()
  ])
  .then(([organizations, users]) => {
    // 所有请求完成后，一次性更新状态
    this.setState({
      organizations,
      organizationUsers: users
    });
  })
  .catch(error => {
    // 记得处理错误，比如某个请求失败的情况
    console.error('请求出错:', error);
  });
}

这种方式的好处是只触发一次重渲染，而且能确保两个数据都准备好后再更新UI，避免中间状态的闪烁。

3. 函数式更新状态（如果必须共用一个状态字段） #

如果你确实需要把两个数据合并到同一个userOrganizations字段里（比如它是一个包含组织和用户的对象），可以使用setState的函数式更新方式，基于之前的状态进行修改，而不是直接覆盖：

componentDidMount() {
  getOrganizationsForUserTemp().then((organizations) => {
    this.setState(prevState => ({
      userOrganizations: {
        ...prevState.userOrganizations,
        organizations
      }
    }));
  });

  getUsersOfOrganizationTemp().then((users) => {
    this.setState(prevState => ({
      userOrganizations: {
        ...prevState.userOrganizations,
        users
      }
    }));
  });
}

这种方式下，每次更新都会保留之前状态里的已有数据，只新增当前请求返回的内容，不会出现覆盖问题。不过这种方式还是会触发两次重渲染，如果想减少渲染次数，还是推荐第二种Promise.all的方案。

内容的提问来源于stack exchange，提问作者Imesh Chandrasiri