如何让useEffect中的callForcast函数仅执行一次并避免无限循环

先明确问题根源：

• callWeather是组件内的普通函数，每次组件渲染都会生成新的函数实例，导致useEffect的依赖数组里的callWeather持续变化，触发useEffect反复执行。
• callForcast依赖weatherData但未被加入useEffect依赖，既可能引发闭包问题，又因为setForcastData更新状态会触发组件重渲染，进一步加剧循环。

给你两种可行的解决方法：

方法一：稳定函数引用+修正依赖数组 #

1. 用useCallback包裹callWeather，让它的引用在依赖不变时保持稳定：

import { useCallback } from 'react';

// ...

const callWeather = useCallback(async () => {
  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);
}, [formData.location]); // 加入callWeather实际依赖的变量，比如formData.location

2. 修正useEffect的依赖数组，加入weatherData，并且只在weatherData存在coord数据时才执行callForcast，避免初始状态报错：

useEffect(() => {
  async function callForcast() {
    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);
  }

  // 只有当weatherData存在coord时才执行，避免初始渲染时的错误
  if (weatherData?.coord) {
    callForcast();
  }
}, [weatherData]); // 依赖实际触发预报请求的weatherData，而非callWeather

方法二：直接在callWeather中调用callForcast（更简洁） #

既然callForcast依赖callWeather获取的weatherData，完全可以在callWeather成功获取数据后直接调用callForcast，无需用useEffect监听：

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);
  
  // 拿到weatherData后立即调用callForcast请求预报
  await callForcast(weatherDataResponse.coord.lat, weatherDataResponse.coord.lon);
}

// 将callForcast改为接收lat和lon的独立函数
async function callForcast(lat, lon) {
  const key = "";
  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);
}

这种方式逻辑更直接：用户点击触发callWeather，获取当前天气后立刻请求预报，完全规避了useEffect的依赖问题，不会出现无限循环。

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