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

【问题标题】：How to run React useEffect only once and property update state with setState如何只运行一次 React useEffect 并使用 setState 更新属性状态
【发布时间】：2019-06-12 15:19:27
【问题描述】：

以下功能性 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计数器不断增加？

【问题讨论】：

你能说明你在哪里使用你的Tips 组件吗？仅从这段代码中，您的 useEffect 应该只触发一次 - 是否有任何可能导致它重新安装？

标签： reactjs react-hooks

【解决方案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 重新渲染组件。

【讨论】：

【解决方案2】：

useEffect 仅在我尝试实现它时被调用一次。然而，区间函数被困在一个循环中。我认为目前尚不清楚您想通过此实现什么目标？

【讨论】：

目标是在每个间隔滴答上增加 idx 状态变量，因此组件应该渲染 0、1、2、3、4、5 等等
好吧，那么当我尝试你的代码时，我得到了预期的结果。我在安装时得到了一个“开始”，然后没有其他任何东西。