Next.js项目未使用useEffect却出现React卸载组件无法更新状态报错如何解决

这个警告的核心触发原因是组件卸载后，仍有异步回调（如图片加载完成回调、过渡动画回调）尝试更新组件状态，你之前的修改没有覆盖到所有触发场景，完整修复方案如下：

修复步骤 #

• 步骤1：新增组件挂载状态标记，拦截卸载后的状态更新
  该方案针对onLoadingComplete这类异步回调触发的异常：图片加载是异步操作，如果你在图片加载完成前就切换页面/销毁了ContentItem，加载完成后的setIsLoaded就会触发警告。新增挂载状态标记后，所有状态更新前都会先判断组件是否还在挂载状态。

  function ContentItem(props) {
    const [isHovering, setIsHovering] = useState(false);
    const [isClicking, setIsClicking] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);
    // 新增挂载状态ref
    const isMounted = useRef(true);
  
    // 组件卸载时更新标记
    useEffect(() => {
      return () => {
        isMounted.current = false;
      }
    }, []);
  
    // 所有状态更新前先判断挂载状态
    const handleLoadingComplete = () => {
      if (isMounted.current && !isLoaded) {
        setIsLoaded(true);
      }
    };
    // 鼠标事件的状态更新也可以加上判断兜底
    const handleMouseOver = () => isMounted.current && setIsHovering(true);
    const handleMouseOut = () => isMounted.current && setIsHovering(false);
    const handleMouseDown = () => isMounted.current && setIsClicking(true);
    const handleMouseUp = () => isMounted.current && setIsClicking(false);
    // 其余代码保持不变
  }
  

• 步骤2：删除重复的事件绑定逻辑
  React自带的合成事件（JSX上写的onMouseOver/onMouseOut等）会在组件卸载时自动清理，不需要你额外手动绑定原生事件。你之前同时写了合成事件和useEffect里的原生事件绑定，等于同一个事件触发两次回调，反而会增加异常概率，直接删掉useEffect里的原生事件绑定逻辑即可。

• 步骤3：为每个Transition组件分配独立的nodeRef
  你当前三个Transition共用同一个nodeRef，会导致react-transition-group的内部状态混乱，可能在组件卸载后仍然触发过渡相关的回调，每个Transition单独配置独立ref即可：

  const loadedTransitionRef = useRef(null);
  const hoverTransitionRef = useRef(null);
  const detailTransitionRef = useRef(null);
  
  // 组件内对应修改每个Transition的nodeRef
  <Transition in={isLoaded} timeout={0} nodeRef={loadedTransitionRef}>
  <Transition in={isHovering} timeout={0} nodeRef={hoverTransitionRef} mountOnEnter unmountOnExit>
  <Transition in={props.isDetailed} timeout={100} nodeRef={detailTransitionRef}>
  

• 步骤4：检查ItemHoverImage的资源类型
  Next.js的Image组件仅支持渲染图片资源，如果你传的是视频地址，会导致加载异常，也可能触发异步报错。如果你要实现hover时的预览视频效果，换用<video>标签实现即可。

内容的提问来源于stack exchange，提问作者pedrosantanna