让 React hook 步入循环

Question

如何调整下面的代码，以便在按下“循环”按钮，然后按下“更改数据”按钮后，我可以看到循环打印更改的数据 - 即“bar”而不是“foo”？

https://codesandbox.io/s/react-hooks-playground-forked-gn5yw

const sleep = async(ms: number) => new Promise(r => setTimeout(r, ms))

const Looper = () => {

    const [data, setData] = React.useState<string>('foo')

    const runOnce = () => {
        console.log(data)
    }

    const loop = async() => {
        while (true) {
            runOnce()
            await sleep(1000)
        }
    }

    return (
        <div>
            <button onClick={loop}>Loop</button>
            <button onClick={runOnce}>Run once</button>
            <button onClick={() => setData('bar')}>Change data in state</button>
        </div>
    )
}

Answer 1

由于data更改不会导致组件发生任何视觉变化，因此不需要是 state。 包含来自旧闭包的数据的runOnce function 是问题所在（毕竟data是用const声明的 - 对于给定的loop调用它不能改变）

改用 ref：

const dataRef = useRef('foo');
const runOnce = () => {
    console.log(dataRef.current)
}

<button onClick={() => { dataRef.current = 'bar'; }}>Change data in state</button>