Javascript 每3秒更改一次文本，效果良好_Javascript_Reactjs_React Hooks_Use Effect

Javascript 每3秒更改一次文本，效果良好

javascript reactjs

Javascript 每3秒更改一次文本，效果良好,javascript,reactjs,react-hooks,use-effect,Javascript,Reactjs,React Hooks,Use Effect,我正在尝试使用useffect（）和setInterval（）每3秒更改一次文本。现在它只改变文本一次，然后就不再改变了。我做错了什么编辑：我正在使用库“react spring” const[toggle，setToggle]=useState（false） useffect（（）=>{ 设置间隔（（）=>{ 开关（拨动）{ 大小写false:setToggle（true）打破大小写为true:setToggle（false）打破 } }, 3000); }, []) {transi

我正在尝试使用useffect（）和setInterval（）每3秒更改一次文本。现在它只改变文本一次，然后就不再改变了。我做错了什么

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

const[toggle，setToggle]=useState（false）
useffect（（）=>{
设置间隔（（）=>{
开关（拨动）{
大小写false:setToggle（true）
打破
大小写为true:setToggle（false）
打破
}
}, 3000);
}, [])
{transitions.map（{item，props}）=>item
？更改的文本#1
：更改的文本#2）}

试试这种方法

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

这样试试

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

解决方案：

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

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

要点：

依赖项数组（

[]

）应为空。这样，您可以确保仅在组件的初始安装时执行此效果。您只需要一个间隔，它的创建和销毁不依赖于单个变量，而是依赖于组件本身。如果将

切换

放在依赖项数组中，则每次变量更改时都会运行此效果，从而有效地每隔3秒进行一次间隔。如果您确实提供了清理功能，这仍然可以工作，但它更像是一个

setTimeout

。但是，在您的情况下（没有清理功能），这将简单地引入无限多个相互竞争的间隔

您必须为

setToggle

提供更新程序函数，而不是简单的值。这可以确保更新使用的是最新的状态，而不是闭包中过时的状态。如果您只是提供了一个值，那么间隔就是对初始值进行闭包，从而更新它。这样，您将始终将初始值

false

更新为

true

，并且这将永远重复，给您留下一个“常量”

true

值

当您使用间隔时，您应该为

useffect

提供一个清理功能，以便在卸载组件时清除间隔。这一点非常重要，因为跳过这一部分会导致内存泄漏，并且会导致错误，因为即使在从DOM中卸载组件之后，您也会尝试更新组件