React Native中setInterval无法更新timer变量，请求技术支持

原代码存在的核心问题 #

1. timer不是React状态变量：用普通var timer = 0声明的变量，更新后不会触发组件重渲染，JSX里的文本始终显示初始值0。
2. 定时器实例作用域错误：interval是在if(run)分支内用var声明的，else分支中无法访问到有效的定时器实例，导致无法正确暂停定时器。
3. 缺少定时器清理逻辑：组件卸载或run状态变化时，未清除之前的定时器，可能引发内存泄漏。

修复后的完整代码 #

import { useState, useEffect, useRef } from 'react';
import { Text, ToastAndroid } from 'react-native'; // 若使用第三方Toast组件，保持原导入即可

const TimerComponent = () => {
  // 用useState管理timer值，确保更新触发重渲染
  const [timer, setTimer] = useState(0);
  const [run, setRun] = useState(false);
  // 用useRef保存定时器实例，跨渲染周期保持引用
  const intervalRef = useRef(null);

  useEffect(() => {
    if (run) {
      ToastAndroid.show(`Timer is running: ${timer}`, ToastAndroid.LONG);
      // 启动定时器，每秒更新timer状态
      intervalRef.current = setInterval(() => {
        setTimer(prev => prev + 1);
      }, 1000);
    } else {
      ToastAndroid.show(`Timer is stopped: ${timer}`, ToastAndroid.LONG);
      // 清除定时器
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    }

    // 清理函数：组件卸载或run变化时清除定时器
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [run]);

  const runTimer = () => {
    setRun(prev => !prev);
  };

  return (
    <Text
      onPress={runTimer}
      style={{
        fontSize: 18,
        color: 'black',
        zIndex: 11,
        fontFamily: 'Roboto-Bold',
      }}
    >
      {timer}
    </Text>
  );
};

export default TimerComponent;

关键修改说明 #

• 将timer改为useState状态：setTimer(prev => prev + 1)通过函数式更新确保每次取到最新的timer值，同时触发组件重渲染，让JSX显示最新计时。
• 用useRef存储定时器实例：intervalRef.current在组件整个生命周期内保持唯一引用，避免作用域问题，确保能正确清除定时器。
• 添加useEffect清理函数：组件卸载或run状态改变时，自动清除之前的定时器，防止内存泄漏。
• 优化setRun的写法：用setRun(prev => !prev)代替setRun(!run)，避免依赖当前run值的闭包问题。

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