Question

我正在尝试在setTimeout和useEffect中更改元素的样式。

这是代码的样子

enter length of string
3|   //after, nextInt() when i=0, since the cursor is not the first, it breaks the line, a[0] = "n" 
enter string values
|one //when  i=1, since it's the firstit gives chance for input, and stores to a[1]
|two  //when  i=1, since it's the firstit gives chance for input, and stores to a[1]
     //a[0] is displayed
one  //a[1] is displayed
two  //a[2] is displayed

我发现渲染主页后，如果我导航到其他页面并返回到主页，将再次调用changesStyles1（）并再次运行动画。从其他页面导航回到主页时，应该怎么做以避免再次调用setTimeout（）。

您会发现，如果我从首页导航到其他页面然后返回首页，则changeStyle2不会再显示动画。这就是我想要的效果。

我的网站托管在netlify上我在codepen

上的代码

Answer 1

我将从父级组件进行管理。

让我们假设以下组件树：

应用
- 首页
- 第1页

在应用中：

const [isFirstMount, setFirstMount] = useState(true);
//...
return(
  <Home ...props changeStyle={isFirstMount} onStyleChanged={() => 
       setFirstMount(false)}/>
  //...
)

在家中：

if (props.changeStyle) {
  let pnt = setTimeout(()=>{
    // change styles  for 'frontenddevelopment'
    changeStyles1();
    onStyleChanged()
    clearTimeout(pnt);
   }, 1000)
}

Answer 2

您需要清除计时器，否则，您的代码可能会遇到不利的副作用。

useEffect(()=>{
    const timer = setTimeout(()=>{
        // change styles  for 'frontenddevelopment'
        changeStyles1();
    }, 1000)

    // changeStyles for 'i love frontend'
    changeStyles2()
    
    //clear the timer
    return () => clearTimeout(timer);

},[]);

有关更多信息，请参见此link。

每当我向后导航时，都会调用useeEffect中的React settimeout

2 个答案: