React中useEffect调用API函数出现无限循环的原因排查求助

你遇到的无限循环问题，核心是函数引用变化引发的连锁反应：

1. 组件渲染时函数被重新创建
   你在组件内部定义的getWeatherForecast函数：

   const getWeatherForecast = async () => {
       const weatherForecast = await axios.get(`${API_ENDPOINT}lat=${props.latitude}&lon=${props.longitude}&exclude=hourly,daily&appid=${API_KEY}`)
       console.log(weatherForecast)
       setWeatherDetails(weatherForecast)
   }
   

   每次组件重新渲染时，这个函数都会被重新生成，导致它的引用地址每次都不相同。

2. useEffect依赖项变化触发重执行
   你的useEffect将getWeatherForecast放入了依赖数组：

   useEffect(() => {
       getWeatherForecast()
   } , [getWeatherForecast])
   

   React会对比依赖项的引用是否变化，一旦发现getWeatherForecast的引用更新，就会重新执行useEffect内部的逻辑。

3. 状态更新触发组件重渲染
   getWeatherForecast内部调用了setWeatherDetails更新组件状态，状态变更会触发组件重新渲染；重新渲染又会生成新的getWeatherForecast函数，再次触发useEffect执行——如此循环往复，就造成了API请求不断重复的无限循环。

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