使用@lottiefiles/dotlottie-react加载.lottie文件时设置loop={true}触发内存越界错误

• 先升级组件到最新版本
  这个问题大概率是组件旧版本的已知bug，先执行升级命令更新依赖：

  npm update @lottiefiles/dotlottie-react
  # 或者用yarn
  yarn upgrade @lottiefiles/dotlottie-react
  

  升级后再测试loop属性是否正常。

• 用手动循环替代内置loop属性
  如果升级后问题还在，可以放弃内置的loop={true}，通过组件ref监听播放完成事件，手动重启动画：

  import { DotLottieReact, useDotLottieRef } from '@lottiefiles/dotlottie-react';
  
  export default function AnimatedComponent() {
    const lottieRef = useDotLottieRef();
  
    const onAnimationEnd = () => {
      lottieRef.current?.play();
    };
  
    return (
      <DotLottieReact
        ref={lottieRef}
        src="/path/to/your-animation.lottie"
        onComplete={onAnimationEnd}
        // 不要添加loop属性
      />
    );
  }
  

• 检查并重新导出.lottie文件
  有可能是你的.lottie文件本身存在异常，用LottieFiles官方编辑器打开文件，验证循环配置是否正确，然后重新导出一次，确保导出过程没有报错。

• 尝试禁用硬件加速
  部分环境下硬件加速会触发内存访问异常，给组件添加disableHardwareAcceleration={true}属性，看看能否解决问题：

  <DotLottieReact
    src="/your-animation.lottie"
    loop={true}
    disableHardwareAcceleration={true}
  />
  

内容的提问来源于stack exchange，提问作者N.SH