React中无依赖项的useEffect Hook仅执行两次问题及无限执行需求咨询

咱们先拆解你遇到的两个问题：为什么API只被调用了两次，以及怎么实现无限次轮询API。

一、为什么API只调用了两次？ #

当你不给useEffect传第二个依赖参数时，它本应该在每次组件渲染完成后执行。但你看到的两次调用，大概率是这个原因：

• 你开启了React的严格模式（Strict Mode）——在开发环境下，Strict Mode会刻意重复执行useEffect、useState初始化等逻辑，目的是帮你提前发现重复执行可能引发的bug（比如未清理的副作用）。生产环境下这个重复执行的行为会消失，只会执行一次。
• 另外，如果你的组件在两次渲染后就不再触发重渲染（比如状态没有更新、props没有变化），那useEffect自然也不会再执行，API调用也就停了。

二、如何让useEffect无限次执行API调用？ #

要实现持续轮询API，你需要借助setInterval来定时触发请求，同时一定要记得清理定时器避免内存泄漏。这里给你优化后的代码：

// 先把状态更新函数改成React约定的命名（避免误解）
const [voltage1, setVoltage1] = useState(0) 
const [voltage2, setVoltage2] = useState(0) 
const [voltage3, setVoltage3] = useState(0) 

useEffect(() => {
  // 封装请求逻辑成单独函数
  const fetchVoltageData = async () => {
    const abortCont = new AbortController();
    try {
      const res = await axios.get("http://localhost:8080/status", {
        mode: 'cors',
        signal: abortCont.signal, 
        headers: { 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' }
      });
      const data = res.data;
      setVoltage1(data.data.status.voltageL1);
      setVoltage2(data.data.status.voltageL2);
      setVoltage3(data.data.status.voltageL3);
    } catch (err) {
      console.log('请求失败:', err);
    }
  };

  // 组件挂载后立即执行一次请求
  fetchVoltageData();
  
  // 设置定时器，每隔3秒执行一次（时间间隔可根据需求调整）
  const intervalId = setInterval(fetchVoltageData, 3000);

  // 清理函数：组件卸载时清除定时器，防止内存泄漏
  return () => clearInterval(intervalId);
}, []); // 空依赖数组确保只在组件挂载时初始化一次定时器

额外注意事项 #

• 我把你之前的getVoltage1这类命名改成了setVoltage1，这是React的通用约定（[状态变量, 更新状态的函数]），能避免团队协作时的误解。
• 用async/await重构了异步代码，比Promise链式调用更易读和维护，当然你也可以保留原来的写法。
• 定时器的时间间隔不要设置过短，否则会给后端服务器造成不必要的压力。
• 清理函数是必须的：当组件从DOM中卸载时，它会清除定时器，防止定时器一直运行导致内存泄漏。

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