Javascript 使钩步入环中

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

const sleep=async（ms:number）=>newpromise（r=>setTimeout（r，ms））
常量循环器=（）=>{
const[data，setData]=React.useState（'foo'）
常数runOnce=（）=>{
console.log（数据）
}
const loop=async（）=>{
while（true）{
runOnce（）
等待睡眠（1000）
}
}
返回(
环
跑一次
setData（'bar'）}>更改状态中的数据
)
}

由于

数据的更改不会导致组件中的任何可视更改，因此不需要对其进行状态更改。包含来自旧闭包的数据的
runOnce
函数就是问题所在（
data
是用
const
声明的，毕竟-对于给定的
循环调用它不能更改）

改用ref：

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

{dataRef.current='bar'；}}>更改状态中的数据
我认为这是一个微不足道的例子——你真正想要的是什么？
const dataRef = useRef('foo');
const runOnce = () => {
    console.log(dataRef.current)
}

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