reactjs UseEffect在我为AOS刷新之前未触发

a0zr77ik 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(236)

我在这里找不到答案AOS Library not working except for on refresh
我正在制作一个React应用程序，并希望使用AOS的动画https://michalsnik.github.io/aos/。
我有一个包含以下代码的函数组件

import AOS from 'aos';
import 'aos/dist/aos.css';

export default function Portfolio() {

  useEffect(() => {
    AOS.init({
      duration: 1000
    });
    AOS.refresh();
  }, []);

return(
 <span className="bumper">Projects </span>

      <div data-aos="fade-in">
      <h3>  Hello! </h3>
      </div>
)

当我第一次加载页面时，屏幕上只显示“Projects”，没有“Hello！"，但当我将“Hello！”编辑为“Hi！”，React自动刷新时，我看到动画出现了。
这到底是怎么回事？
我在React Dev环境中

"react-dom": "^18.1.0",
    "react": "^18.1.0",
    "aos": "^3.0.0-beta.6",

reactjs

来源：https://stackoverflow.com/questions/72820605/useeffect-not-triggering-until-i-refresh-for-aos

1条答案

按热度按时间

ubby3x7f1#

React V18为useEffect Hook添加了一个重新渲染。所以现在它在strict模式下重新渲染了两次，启用了。有两种方法可以解决这个问题。要么禁用strict模式（我完全不推荐），要么通过返回一个回调函数来取消第一次渲染时发生的事情。

useEffect(() => {
    AOS.init({
      duration: 1000
    });
    AOS.refresh();
return () => {
//Kill your animation not sure of the syntax for AOS. 
AOS.kill()
//Or 
AOS.refresh()
}
  }, []);

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs UseEffect在我为AOS刷新之前未触发

1条答案

相关问题

热门标签

最新问答