ReactJS嵌套Axios请求全部完成后调用setState的问题

我太懂你现在的困扰了——你在forEach循环里发起的Axios请求都是异步执行的，可你在循环结束后立刻就调用了setState，这时候所有的下载链接请求还没跑完呢，items数组里的link属性根本还没被赋值，组件自然拿不到正确的数据来渲染。

要解决这个问题，核心就是等所有异步请求都完成后再更新状态，这里的关键工具就是Promise.all()。下面是修改后的完整代码，我会一步步给你讲清楚改动点：

constructor(props) {
  super(props);
  this.state = { 
    isLoaded: false, 
    items: [] 
  };
  this.fetchFiles = this.fetchFiles.bind(this);
}

componentDidMount() {
  this.fetchFiles();
}

fetchFiles() {
  axios.get('/list')
    .then((response) => {
      const items = response.data.entries;
      // 把forEach改成map，每个item返回一个请求Promise
      const linkPromises = items.map((item) => {
        return axios.get('/download' + item.path_lower)
          .then((linkResponse) => {
            // 给当前item添加link属性，返回修改后的item
            item.link = linkResponse.data;
            return item;
          })
          .catch((error) => {
            console.log(`获取${item.path_lower}链接失败:`, error);
            // 单个请求失败时给link设默认值，避免整个Promise.all失败
            item.link = null;
            return item;
          });
      });

      // 等待所有请求Promise都完成
      return Promise.all(linkPromises);
    })
    .then((updatedItems) => {
      // 所有请求完成后，再更新状态渲染组件
      this.setState({
        isLoaded: true,
        items: updatedItems
      }, () => {
        // setState是异步的，要在回调里才能拿到最新状态
        console.log(this.state.items);
      });
    })
    .catch((error) => {
      console.log('获取文件列表失败:', error);
      this.setState({ isLoaded: true }); // 即使列表请求失败，也要标记加载完成
    });
}

关键改动说明： #

• 用map代替forEach：forEach只是遍历执行操作，不会返回任何值；而map会把每个异步请求的Promise收集成一个数组，这样我们才能用Promise.all()跟踪所有请求的完成状态。
• Promise.all()的作用：它会等待数组里的所有Promise都成功完成后，才会进入下一个then回调，这时候拿到的updatedItems就是所有已添加link属性的完整条目数组。
• 处理单个请求失败：在每个Axios请求的catch里，我们给item.link设置了默认值并返回item，这样即使某个文件的链接请求失败，Promise.all()也不会整体失败，其他成功的条目依然能正常渲染。
• 正确查看更新后的状态：setState是异步操作，原来的console.log(this.state.items)会打印旧状态，把它放在setState的第二个回调参数里，就能确保拿到最新的状态数据。

这样修改后，组件就会在所有下载链接都获取完成后，再更新状态并渲染，完全符合你的需求。

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