如何运行仅对 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函数回调中保证interval只启动一次？

另外，状态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 然后将组件 re-rendered 设置为 1.

如何运行仅对 useEffect 作出反应并属性使用 setState 更新状态

How to run React useEffect only once and property update state with setState

reactjs

react-hooks

如何 运行 仅对 useEffect 作出反应并 属性 使用 setState 更新状态

How to run React useEffect only once and property update state with setState

reactjs

react-hooks

如何运行仅对 useEffect 作出反应并属性使用 setState 更新状态