React useState存储的定时器/监听ID被重置为undefined问题排查

开发者阿泽

2026-9-1

问题成因

你遇到的重复创建实例、ID值在undefined和数字间反复横跳的问题，来自三个核心写法错误：

你把副作用初始化逻辑直接写在了组件函数的顶层执行，React 18默认开启的严格模式会在组件首次挂载时执行两次完整的渲染-卸载流程，用来检测不规范的副作用写法，你的初始化逻辑会在这个双调用过程中被重复触发。
你选择用useState存储定时器ID、地理位置监听ID是错误选型：这两个ID值不需要驱动视图更新，存进state每次赋值都会触发额外的重渲染；同时渲染阶段生成的函数闭包只会捕获当次渲染的state值，第一次setState更新ID的操作还没提交时，下一次渲染读到的还是初始的undefined值，判断逻辑自然失效。
你没有写对应的清理逻辑，就算逻辑正常跑通，组件卸载后定时器和位置监听也不会被销毁，会造成内存泄漏、后台重复执行回调的问题。

修正方案

把跨渲染周期留存、不需要触发视图更新的ID值，从useState换成useRef存储，ref的current属性在全生命周期内持久保留，修改它不会触发重渲染。
把所有初始化监听、创建定时器的副作用逻辑全部移到useEffect里，传入空依赖数组保证逻辑只在组件挂载时执行一次。
在useEffect的返回清理函数里，清除定时器、注销地理位置监听，避免内存泄漏。

修正后的完整代码：

import { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  console.log("NEW RENDER");
  
  const watcherIdRef = useRef();
  const updatingIntervalRef = useRef();
  const [test, setTest] = useState(1);

  // 地理位置监听回调
  function success() {
    console.log("geo position updated!");
  }

  function error(err) {
    console.error("geo watch error: ", err);
  }

  // 定时器回调
  function updateValues() {
    console.log("Interval executed");
  }

  // 仅在组件挂载时执行一次初始化逻辑
  useEffect(() => {
    if (!updatingIntervalRef.current) {
      console.log("new interval created");
      updatingIntervalRef.current = setInterval(updateValues, 1000);
    }
    if (!watcherIdRef.current) {
      console.log("new geoWatcher created");
      watcherIdRef.current = navigator.geolocation.watchPosition(success, error, {
        maximumAge: 500,
        enableHighAccuracy: true
      });
    }

    // 组件卸载时清理所有副作用
    return () => {
      if (updatingIntervalRef.current) {
        clearInterval(updatingIntervalRef.current);
        updatingIntervalRef.current = undefined;
      }
      if (watcherIdRef.current) {
        navigator.geolocation.clearWatch(watcherIdRef.current);
        watcherIdRef.current = undefined;
      }
    }
  }, []);

  function buttonFunction() {
    setTest((prev) => prev + 1);
  }

  return (
    <div className="App">
      <h1>{test}</h1>
      <button onClick={buttonFunction}>Trigger Re-render</button>
    </div>
  );
}

日志异常的对应解释

你看到日志里ID先显示16、1，下次执行又变回undefined，之后变成25、2的流程是：

首次渲染执行顶层的initializeContext，读到两个state都是初始值undefined，创建第一组定时器和位置监听，调用setState准备把拿到的ID（16、1）存入state。
严格模式触发组件预卸载，立刻启动第二次挂载渲染，这时候第一次的setState还没完成提交更新，第二次渲染的函数闭包里拿到的state还是初始的undefined，于是又创建了第二组定时器和监听，拿到的新ID就是25、2。
两次setState的更新陆续提交完成，state里有了有效ID值，后续重渲染时的判断逻辑才会命中ID存在的分支，不再创建新实例，但你第一次创建的那组定时器和监听没有被清理，会一直在后台持续执行回调。

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