小编RRh*_*des的帖子

在这里学习React，我只是想展示一个lottie动画。看起来相当简单，但我在使用 useEffect 挂钩时遇到了一些问题。我使用钩子在页面加载时渲染动画，但它不断重复（有时两次或更多次）。我知道这是因为 useEffect 会多次触发，但我不知道如何处理这个问题。我只想在页面上显示一个动画。我怎样才能实现这个目标？

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;