如果你想在使用超时时访问一个状态，最好保留一个对该变量的引用，你可以使用useRef钩子来实现这一点，只需添加一个带有处理值的ref，并记得更新它。

const [processing, setProcessing] = useState<boolean>(false);
const processingRef = useRef(null);

useEffect(() => {
    processingRef.current = processing;
}, [processing]);

我很感兴趣这个是如何工作的，以及基于公认答案的最终解决方案是什么。我根据Dan Abramov的useInterval钩子提出了一个解决方案，并认为这个解决方案以及一些相关资源的链接可能对其他人有用。
我很好奇，你决定使用setTimeout并引入async/await和while循环，而不是使用setInterval，有什么特别的原因吗？我想知道其中的含义。你会在卸载所有正在运行的计时器时处理clearTimeout吗？你的最终解决方案是什么样子的？

带useInterval的演示/解决方案

https://codesandbox.io/s/useinterval-example-processing-ik61ho

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

const App = () => {
  const [processing, setProcessing] = useState(false);

  useInterval(() => console.log("processing"), 2000, processing);

  return (
    <div>
      <button onClick={() => setProcessing((prev) => !prev)}>
        {processing ? "Stop Processing" : "Begin Processing"}
      </button>
    </div>
  );
};

function useInterval(callback, delay, processing) {
  const callbackRef = useRef();

  // Remember the latest callback.
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      callbackRef.current();
    }
    if (delay !== null && processing) {
      let id = setInterval(tick, delay);

      console.log(`begin processing and timer with ID ${id} running...`);

      // Clear timer on clean up.
      return () => {
        console.log(`clearing timer with ID ${id}`);
        console.log("stopped");
        clearInterval(id);
      };
    }
  }, [delay, processing]);
}

export default App;

相关链接

Dan Abramov - Making setInterval Declarative with React Hooks
SO Question: React hooks - right way to clear timeouts and intervals

下面是工作代码：

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

const App = () => {

    const [processing, setProcessing] = useState(false)
    const processingRef = useRef(null);

    const sleep = (ms) => {
        return new Promise(resolve => setTimeout(resolve, ms))
    }

    useEffect(() => {
        const toggleProcessing = async () => {
            while (processingRef.current) {
                console.log('Processing')
                await sleep(2000);
            }
            console.log('Stopping Processing')
        }
        processingRef.current = processing;
        if (processing) {
            toggleProcessing()      // async function
        }
    }, [processing])

    return (
        <>
            <button onClick={() => setProcessing(current => !current)}>{processing ? 'Stop Processing' : 'Begin Processing'}</button>
        </>
    )
}

export default App;