Question

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

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

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

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

Answer 1

useEffect在我尝试实现它时仅被调用一次。但是，间隔功能陷入了循环。我认为目前尚不清楚要实现什么目标？

Answer 2

此代码将满足您的需求：

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重新呈现组件。

如何仅运行一次React useEffect并使用setState

2 个答案: