React中如何在setInterval函数内更新time值？

你的问题核心在于普通变量的闭包陷阱：代码里的time是局部变量，组件每次渲染都会重新声明，而setInterval的回调函数形成了闭包，捕获的是定时器启动时的那个time引用。当你点击RESET修改time=10时，这个是新的局部变量，和闭包里的不是同一个，所以定时器里的time不会同步更新。

下面给出两种可行的解决方案：

方案一：用useRef维护time的持久引用 #

useRef的current属性在组件整个生命周期内是同一个引用，不会随渲染重置，能让闭包始终拿到最新值：

import React, { useState, useRef, useEffect } from 'react';

function Timer() {
  const timeRef = useRef(10);
  const [timeText, setTimeText] = useState(timeRef.current);
  const [timerOn, setTimerOn] = useState(false);
  const intervalRef = useRef(null);

  const handleReset = () => {
    if (timerOn) {
      // 直接修改ref的current值，闭包能拿到最新值
      timeRef.current = 10;
      setTimeText(10); // 同步更新页面显示
      return;
    }
    setTimerOn(true);
    timeRef.current = 10;
    setTimeText(10);
    intervalRef.current = setInterval(() => {
      timeRef.current--;
      setTimeText(timeRef.current);
      if (timeRef.current < 0) {
        clearInterval(intervalRef.current);
        setTimerOn(false);
      }
    }, 1000);
  };

  // 组件卸载时清理定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  return (
    <div>
      <h1>{timeText}</h1>
      <button onClick={handleReset}>{timerOn ? 'RESET' : 'START'}</button>
    </div>
  );
}

export default Timer;

方案二：用useState管理time，结合函数式更新 #

直接把time交给useState管理，通过函数式更新setTime(prevTime => ...)确保每次都能拿到最新的state值：

import React, { useState, useEffect, useRef } from 'react';

function Timer() {
  const [time, setTime] = useState(10);
  const [timerOn, setTimerOn] = useState(false);
  const intervalRef = useRef(null);

  useEffect(() => {
    if (timerOn) {
      intervalRef.current = setInterval(() => {
        setTime(prevTime => {
          const newTime = prevTime - 1;
          if (newTime < 0) {
            clearInterval(intervalRef.current);
            setTimerOn(false);
            return 10; // 计时结束后重置为初始值
          }
          return newTime;
        });
      }, 1000);
    }
    // 状态变化或组件卸载时清理定时器
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [timerOn]);

  const handleReset = () => {
    if (timerOn) {
      setTime(10); // 直接更新state，定时器会拿到最新值
      return;
    }
    setTimerOn(true);
    setTime(10);
  };

  return (
    <div>
      <h1>{time}</h1>
      <button onClick={handleReset}>{timerOn ? 'RESET' : 'START'}</button>
    </div>
  );
}

export default Timer;

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