如何只运行一次 React useEffect 并使用 setState 更新属性状态

Question

以下函数式 React 组件运行 useEffect 钩子两次，即使空数组 [] 作为第二个参数传递并且该组件仅添加到页面一次：

const Tips = () => {
const [idx, setIdx] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setIdx(idx + 1)
}, 1000)
}, []) // empty array: run effect only once
return <>{idx}</>
}

如何确保间隔在useEffect函数回调中只启动一次？

此外，状态 idx 仅更新一次，组件输出 0，以后为 1。如何更改组件以使 idx 计数器不断增加？

Answer 1

此代码将执行您需要的操作：

const Tips = () => {
const [idx, setIdx] = React.useState(0);
React.useEffect(() => {
console.log("start use effect");
const interval = setInterval(() => {
setIdx(idx=>idx + 1);
}, 1000);
return ()=>clearInterval(interval)
}, []); // empty array: run effect only once
return <>{idx}</>;
};

诀窍就在这里setIdx(idx=>idx + 1).而不是setIdx(idx + 1).由于 useEffect 运行一次，间隔处理程序会在初始 idx 值(0)上创建一个闭包，在每个 setIdx 上，它只是将其设置为 0+1，然后用 1 重新渲染组件。

Answer 2

当我尝试实现它时，useEffect只被调用一次。然而，间隔函数卡在循环中。我认为目前还不清楚您想用这个实现什么？