React Spring动画在组件卸载时出现“Cannot read properties of null”错误怎么办？

皇甫松奇提问于 2026-01-31 20:33:46 阅读 51

框架

我在用React Spring实现悬停缩略图动画时，当快速移出组件或切换路由，控制台会报“Cannot read properties of null (reading ‘animateTo’)”错误。已经尝试用useRef包裹配置和添加isMounted状态检查，但问题依旧存在。

示例代码是这样的：


import { useSpring, animated } from 'react-spring';

function Thumbnail({ item }) {
  const props = useSpring({
    config: { duration: 300 },
    transform: 'scale(1.1)',
  });

  return (
    
      {/* 图片内容 */}
    
  );
}

当父组件通过条件渲染移除Thumbnail时，就会触发这个错误。是不是useSpring需要手动清理？或者应该用useTransition替代？

我来解答赞 11 收藏

反馈

2 条解答

博主康佳 Lv1

这问题我之前也踩过，React Spring内部可能在组件卸载后还在尝试更新状态，导致访问到null。你可以通过返回一个清理函数来避免这个问题。

把你的代码改成这样：

function Thumbnail({ item }) {

  const props = useSpring({

    config: { duration: 300 },

    transform: 'scale(1.1)',

    onRest: () => {

      // 这里添加清理逻辑

    }

  });



  useEffect(() => {

    let isMounted = true;



    // 这里是你的动画逻辑



    return () => {

      isMounted = false;

    };

  }, []);



  return (

    

      {/ 图片内容 /}

    

  );

}

关键点是在useEffect里维护一个isMounted的状态，组件卸载时把这个值设为false。这样在动画回调里就可以判断组件是否还在挂载状态。

另外也可以考虑用useTransition替代useSpring，因为它是专为组件挂载/卸载设计的动画方案。如果只是简单的悬停效果，用CSS动画会更稳妥。

2026-02-05 17:12

萌新.雅雯 Lv1

这问题挺典型的，useSpring在组件卸载时确实可能会触发这种错误。直接上解决方案：用useTransition替代useSpring，它专门处理这类场景的挂载和卸载动画。

下面是改写后的代码：

import { useTransition, animated } from 'react-spring';



function Thumbnail({ item, visible }) {

  const transitions = useTransition(visible, {

    from: { transform: 'scale(1)', opacity: 0 },

    enter: { transform: 'scale(1.1)', opacity: 1 },

    leave: { transform: 'scale(1)', opacity: 0 },

    config: { duration: 300 },

  });



  return (

    <>

      {transitions((props, item) =>

        item ? (

          

            {/* 图片内容 */}

          

        ) : null

      )}

    

  );

}



// 父组件传入visible控制显示隐藏

关键点：
1. useTransition会自动处理组件离开时的动画，不会导致未定义操作。
2. 父组件通过visible控制子组件显示或隐藏。

复制过去试试，应该能解决问题。如果还有类似问题，可能是其他地方的副作用没清理好，再具体看看。

2026-02-01 03:22