React中函数在state更新前执行导致数据过时问题求助

核心问题 #

1. 调用顺序完全错误：你当前先执行callForcast再执行callWeather，但callForcast需要的经纬度数据恰好来自callWeather的请求结果，逻辑顺序颠倒了。
2. React State异步更新特性：即使调整顺序先调用callWeather，setWeatherData是异步操作，不会立刻更新weatherData变量，紧接着调用callForcast依然会拿到旧的state值。

解决方案一：直接传递API返回数据（推荐，无需依赖State） #

修改callWeather让它返回获取到的天气数据，在触发函数里先拿到这个数据，再传给callForcast，彻底绕开state更新的异步问题。

修改后的代码： #

// 修改callWeather，返回获取到的原始数据
async function callWeather() {
    const key = "";
    let location = formData.location;
    const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=${key}`;
    const currentWeatherResponse = await fetch(currentWeatherUrl);
    if (!currentWeatherResponse.ok) {
      const message = `An error has occured: ${currentWeatherResponse.status}`;
      throw new Error(message);
    }
    const weatherDataResponse = await currentWeatherResponse.json();
    setWeatherData(weatherDataResponse);
    // 返回数据供后续函数使用
    return weatherDataResponse;
  }

// 修改callForcast，接收外部传入的天气数据
async function callForcast(weatherData) {
    const key = "";
    const lon = weatherData.coord.lon
    const lat = weatherData.coord.lat
    const forcastWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&units=metric&appid=${key}`
    const forcastWeatherResponse = await fetch(forcastWeatherUrl);
    if (!forcastWeatherResponse.ok) {
      const message = `An error has occured: ${forcastWeatherResponse.status}`;
      throw new Error(message);
    } 
    const forcastDataResponse = await forcastWeatherResponse.json();
    setForcastData(forcastDataResponse);
  }

// 修改触发函数，按顺序执行并传递数据
async function callWeatherAndForcast() {
    try {
      // 先完成天气数据请求
      const weatherData = await callWeather();
      // 用返回的实时数据调用预报函数
      await callForcast(weatherData);
    } catch (err) {
      // 统一处理错误，比如提示用户
      console.error(err);
    }
  }

解决方案二：用useEffect监听State变化 #

如果业务场景必须依赖state更新来触发预报请求，可以使用useEffect监听weatherData的变化，当它更新后自动调用callForcast。

代码示例： #

// 保留原callWeather和callForcast逻辑不变
async function callWeather() { /* 原代码 */ }
async function callForcast() { /* 原代码 */ }

// 修改触发函数，仅调用天气数据请求
function callWeatherAndForcast() {
    callWeather();
}

// 添加useEffect监听weatherData变化
useEffect(() => {
    // 确保经纬度存在时才调用预报接口
    if (weatherData?.coord?.lon && weatherData?.coord?.lat) {
      callForcast();
    }
}, [weatherData]); // 依赖项设为weatherData，当它更新时自动执行

注意：这个方案的局限性是，如果weatherData因其他操作更新，也会触发callForcast，需根据业务场景判断是否适用。

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