React Hooks中如何通过useEffect实现每15秒定时获取数据更新页面？

嘿，这个需求很常见！要让这段代码周期性执行，我们可以借助setInterval，同时还要注意避免内存泄漏和修复原代码里的小bug——你原代码中return语句之后的response.json()逻辑根本不会执行，这会导致请求成功后也没法更新温度数据。

下面是优化后的完整代码：

import { useState, useEffect } from 'react';

function WeatherComponent() {
  const [temperature, setTemperature] = useState(null);

  // 把数据获取逻辑抽成单独函数，方便复用
  const fetchWeatherData = async () => {
    try {
      const response = await fetch("urlToWeatherData");
      if (response.status !== 200) {
        console.log(`Looks like there was a problem. Status Code: ${response.status}`);
        return;
      }
      const data = await response.json();
      console.log(data[0].temperature);
      setTemperature(data[0].temperature);
    } catch (err) {
      console.log("Fetch Error :-S", err);
    }
  };

  useEffect(() => {
    // 组件挂载时先执行一次，避免等待15秒才显示数据
    fetchWeatherData();
    
    // 设置15秒间隔的定时器
    const intervalId = setInterval(fetchWeatherData, 15000);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(intervalId);
  }, []); // 空依赖数组确保只在组件挂载/卸载时执行

  return (
    <div>Current Temperature: {temperature ?? "Loading..."}</div>
  );
}

关键说明： #

• 把数据获取逻辑抽成fetchWeatherData函数：既可以在组件挂载时立即执行，也能被定时器重复调用，代码更简洁可维护。
• 使用async/await替代链式then：比原代码的回调链更易读，错误处理也更清晰。
• 清理定时器：从useEffect返回的函数会在组件卸载时执行，用clearInterval清除定时器，避免组件销毁后定时器仍在后台运行导致内存泄漏。
• 修复原代码的结构错误：将response.json()的处理移到return语句之前，确保请求成功后能正常解析数据并更新状态。

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