React组件fetch请求完成前回调提前执行问题求助

你遇到的是典型的异步操作时序问题——fetch是异步执行的，而你的回调逻辑在请求还没完成时就跑起来了。别担心，我们可以通过让getData返回Promise，并在子组件中等待这个Promise完成来解决。

第一步：修改父组件的getData方法，让它返回Promise #

首先要确保getData能明确返回一个包含数据的Promise，这样子组件就能精准感知数据就绪的时机，同时我们加上错误处理，避免网络请求出错时没有反馈：

getData(args) { 
  return fetch(`${process.env.REACT_APP_API}/offers?title=${args}`) 
    .then(response => {
      // 先检查响应是否正常，避免错误响应进入后续逻辑
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then((services) => { 
      this.setState({ services });
      return services; // 将获取到的数据返回，供后续回调使用
    })
    .catch(error => {
      console.error('获取数据时出错：', error);
      throw error; // 抛出错误，让子组件可以捕获并处理
    });
}

第二步：在子组件中等待异步操作完成 #

现在getData会返回一个Promise，我们可以在子组件的handleSubmit中用两种方式等待数据就绪：

方式一：使用async/await（推荐，代码更直观）

把handleSubmit改成异步函数，用await等待getData完成后再处理结果：

async handleSubmit(event) {
  event.preventDefault();
  
  try {
    // 假设你通过props拿到父组件的getData方法
    const services = await this.props.getData(this.state.title);
    console.log(services); // 这时候数据已经准备好了！
    // 这里可以添加你的其他处理逻辑，比如更新子组件状态、渲染数据等
  } catch (error) {
    // 处理请求失败的情况
    console.error('获取服务数据失败：', error);
  }
}

方式二：使用.then链式调用

如果你不习惯async/await，也可以用传统的Promise链式调用：

handleSubmit(event) {
  event.preventDefault();
  
  this.props.getData(this.state.title)
    .then(services => {
      console.log(services); // 请求完成后执行这里的逻辑
      // 其他处理操作
    })
    .catch(error => {
      console.error('获取服务数据失败：', error);
    });
}

为什么这样能解决问题？ #

原来的getData虽然内部有fetch和.then，但没有明确将获取到的数据通过Promise传递出来，子组件调用它时，代码会直接往下执行console.log，不会等待fetch完成。修改后，getData返回的Promise会在数据获取完成后才resolve，子组件通过await或.then等待这个状态，就能保证console.log在数据就绪后执行。

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