reactjs - useImperativeHandle 函数中 let 变量未定义

Question

我在 React Native (Expo) 下使用 .web.js 文件中的lottie-web 包。

我的问题是 let 变量 anim 在 useImperativeHandle 的函数中未定义。在 useEffect 中动画效果非常好。例如，如果我在 useEffect 初始化后立即访问 anim.play() ，它就会起作用。但在命令式的 play() 函数中它不起作用。

在我的父组件中，我使用 useRef 创建一个引用并将该引用传递给组件

const lottieAnim = useRef(null);

--

let anim;
useEffect(() => {
  const lottieOptions = {
    container: divContainer.current,
    renderer: 'svg',
    loop,
    autoplay,
    segments: segments !== false,
    animationData,
    rendererSettings,
  };
  anim = lottie.loadAnimation({ ...lottieOptions, ...options });
  // anim.play(); works here 

  if (onAnimationFinish) {
    anim.addEventListener('complete', onAnimationFinish);
  }
}, []);

useImperativeHandle(ref, () => ({
  stop() {
    anim.stop();
  },
  pause() {
    anim.pause();
  },
  play() {
    anim.play();
    // anim is undefined
  },
  setSpeed(s) {
    anim.setSpeed(s);
  },
  setDirection(d) {
    anim.setDirection(d);
  },
  playSegments(s) {
    anim.playSegments(s);
  },
}));

Answer 1

2023 年更新

我创建了一个包，用于连接第三方包，以更简单的方式通过 useImperativeHandler 使用react，您可能会发现它有用且更易于使用😊。
react-aptor

这是因为 React 在 useImperativeHandle 中创建 API 函数时不知道 anim 是什么(由于闭包和 React 更新策略不会通过改变变量来触发任何更新)。有一些方法可以解决这个问题，毕竟，这取决于个人意见，我会使用这样的方法，效果最好 对我来说。

添加GetApi函数

// hanlder.js
const stop = anim => anim.stop()
// api.js
const getAPI = anim => () => ({
  stop: stop.bind(this, anim),
  // or simply
  setSpeed: s => anim.setSpeed(s),

  // you can mock APIs here if anim is null or throw an Error
});

将 anim 存储在某种状态

store anim in the state for the first render only and use it in the dependencies array of getApi useEffect

const [anim, setAnim] = React.useState(null);

React.useEffect(() => {
  // initialization part
}, []);

React.useImperativeHandle(ref, getAPI(anim), [anim]);