每 3 秒更改一次文本 React useEffect答案

【问题标题】：Change text every 3 seconds React useEffect每 3 秒更改一次文本 React useEffect
【发布时间】：2021-04-06 19:34:34
【问题描述】：

我正在尝试使用 useEffect() 和 setInterval() 每 3 秒更改一次文本。现在它只更改一次文本，然后不再更改它。我做错了什么？

编辑：我正在使用库“react-spring”

  const [toggle, setToggle] = useState(false)

  useEffect(() => {
    setInterval(() => {
      switch (toggle) {
        case false: setToggle(true)
        break;
        case true: setToggle(false)
        break;
      }
    }, 3000);
  }, [])

{transitions.map(({ item, props }) => item
  ? <animated.div style={props}>Text that changes #1</animated.div>
  : <animated.div style={props}>Text that changes #2</animated.div>)}

【问题讨论】：

您正在关闭 setInterval 回调中的 toggle 状态，也许可以考虑使用 Dan 的 useInterval 钩子：overreacted.io/making-setinterval-declarative-with-react-hooks（或者可能是参考）。也值得看看昨天发布的this question 和。它的答案
尝试这样的事情：useEffect(() => { setTimeout(() => setToggle(prevToggle => !prevToggle), 3000) }, [toggle]); 超时函数每次都应该获得新的切换值
当我在 useEffect 函数末尾删除 [toggle] 时，它实际上起作用了。这是为什么？我认为它应该听切换变量来工作？ @Jayce444

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

试试这个方法

useEffect(() => {
  setTimeout(() => setToggle((prevToggle) => !prevToggle), 3000);
}, [toggle]);

【讨论】：

查看我在其他人下的评论！当我删除 [toggle] 时它起作用了

【解决方案2】：

解决方案：

useEffect(() => {
    const intervalID = setTimeout(() =>  {
        setToggle((toggle) => !toggle)
    }, 3000);

    return () => clearInterval(intervalID);
}, []);

要点：

依赖数组([]) 应该为空。这样，您可以确保仅在组件的初始安装时执行此效果。您只需要一个间隔，它的创建和销毁不依赖于单个变量，而是依赖于组件本身。如果您将toggle 放入依赖数组中，您将在每次变量更改时运行此效果，从而有效地每 3 秒产生另一个间隔。如果您确实提供了清理功能，这仍然可以工作，但它更像是setTimeout。但是，在您的情况下（没有清理功能），这只会引入无限数量的间隔，这些间隔将相互竞争。
您必须为setToggle 提供一个更新函数，而不是一个简单的值。这可确保您使用最新状态进行更新，而不是闭包中的陈旧状态。如果您只是提供一个值，则间隔将关闭您的初始值并因此更新它。这样，您将始终将初始 false 更新为 true，这将永远重复，为您留下一个“恒定的”true 值。
当您使用间隔时，您应该向useEffect 提供清理功能以清除组件卸载的间隔。这非常很重要，因为跳过这部分会导致内存泄漏和错误，因为即使在组件从 DOM 中卸载后，您也会尝试更新组件。

【讨论】：