React中setInterval回调无法获取更新后state的问题及修复

需求与问题 #

需求功能 #

点击按钮时将active设为对应按钮的值，3秒后清空实现弹窗提示；如果在3秒内点击其他按钮，需要等待当前弹窗结束后，再显示新点击按钮的内容。

遇到的问题 #

在handleButtonClick函数的else分支中，setInterval的回调函数始终只能访问旧的active state值——即便state已经更新，回调里拿到的还是启动interval时的旧值，导致无法正确判断当前弹窗是否结束，进而无法触发后续的新弹窗逻辑。

原代码 #

export default function App() {
  const [active, setActive] = useState("");

  function handleButtonClick(value) {
    if (!active) {
      setActive(value);
      setTimeout(() => {
        setActive("");
        console.log(active);
      }, 3000);
    } else {
      let interval = setInterval(() => {
        console.log(active);
        if (!active) {
          setActive(value);
          setTimeout(() => {
            setActive("");
          }, 3000);
          clearInterval(interval);
        }
      }, 0);
    }
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        justifyContent: "space-between"
      }}
    >
      <div>
        <button onClick={() => handleButtonClick("first")}>first</button>
        <button onClick={() => handleButtonClick("second")}>second</button>
        <button onClick={() => handleButtonClick("third")}>third</button>
      </div>
      <div>{active.length > 0 && <p>{active} button Clicked</p>}</div>
    </div>
  );
}

修复方案 #

优先方案：使用任务队列替代轮询（更高效） #

不用setInterval轮询监听state变化，而是维护一个任务队列，当当前弹窗结束后自动处理队列中的下一个任务，既解决闭包问题，又避免不必要的性能消耗。

修改后的代码：

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

export default function App() {
  const [active, setActive] = useState("");
  // 用ref维护请求队列和是否正在处理的标记
  const requestQueue = useRef([]);
  const isProcessing = useRef(false);

  // 监听active变化，当弹窗结束时处理下一个任务
  useEffect(() => {
    // 如果当前没有活跃弹窗，且队列里有任务
    if (!active && requestQueue.current.length > 0 && !isProcessing.current) {
      isProcessing.current = true;
      const nextValue = requestQueue.current.shift();
      setActive(nextValue);
      // 3秒后清空active，标记处理结束
      setTimeout(() => {
        setActive("");
        isProcessing.current = false;
      }, 3000);
    }
  }, [active]);

  function handleButtonClick(value) {
    if (!active && !isProcessing.current) {
      // 没有活跃弹窗且不在处理中，直接显示
      setActive(value);
      isProcessing.current = true;
      setTimeout(() => {
        setActive("");
        isProcessing.current = false;
      }, 3000);
    } else {
      // 否则加入队列
      requestQueue.current.push(value);
    }
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        justifyContent: "space-between"
      }}
    >
      <div>
        <button onClick={() => handleButtonClick("first")}>first</button>
        <button onClick={() => handleButtonClick("second")}>second</button>
        <button onClick={() => handleButtonClick("third")}>third</button>
      </div>
      <div>{active.length > 0 && <p>{active} button Clicked</p>}</div>
    </div>
  );
}

方案说明

1. 任务队列：用requestQueue这个ref存储等待显示的按钮值，完全避开闭包捕获旧state的问题。
2. 处理状态标记：isProcessing标记当前是否正在处理弹窗，防止重复触发逻辑。
3. useEffect监听：当active变为空（弹窗结束）时，自动从队列取出下一个任务并显示，无需轮询。

备选方案：用useRef同步最新state值 #

如果坚持使用轮询思路，可以用ref同步最新的active值，让setInterval的回调能拿到最新状态：

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

export default function App() {
  const [active, setActive] = useState("");
  const activeRef = useRef(active);

  // 同步state到ref
  useEffect(() => {
    activeRef.current = active;
  }, [active]);

  function handleButtonClick(value) {
    if (!active) {
      setActive(value);
      setTimeout(() => {
        setActive("");
      }, 3000);
    } else {
      let interval = setInterval(() => {
        // 这里用ref的current拿到最新的active值
        if (!activeRef.current) {
          setActive(value);
          setTimeout(() => {
            setActive("");
          }, 3000);
          clearInterval(interval);
        }
      }, 100); // 适当延长轮询间隔，减少性能消耗
    }
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        justifyContent: "space-between"
      }}
    >
      <div>
        <button onClick={() => handleButtonClick("first")}>first</button>
        <button onClick={() => handleButtonClick("second")}>second</button>
        <button onClick={() => handleButtonClick("third")}>third</button>
      </div>
      <div>{active.length > 0 && <p>{active} button Clicked</p>}</div>
    </div>
  );
}

这个方案通过activeRef同步最新的state值，让setInterval的回调能访问到最新状态，但轮询仍会有一定性能消耗，推荐优先使用任务队列方案。

内容的提问来源于stack exchange，提问作者SHAIK SHAMEER BASHA