React生命周期方法中setState报错，如何避免未挂载组件更新状态？

这个警告的核心问题很清晰——你的组件已经被卸载了，但setTimeout里的setState还在试图更新它的状态。咱们一步步来解决这个问题：

先解决根源：替换废弃的生命周期方法 #

首先要注意，componentWillReceiveProps已经在React 16.3+中被标记为废弃（后续版本甚至可能移除），官方推荐用componentDidUpdate来替代这种“props变化后执行副作用”的场景——它更安全，也更符合React的设计理念。

把你的代码改成这样：

componentDidUpdate(prevProps) {
  // 对比前后props的totalVehicles值
  if (prevProps.totalVehicles !== this.props.totalVehicles) {
    this.setState({ animation: "cartCount" });
    // 把定时器实例存到组件实例上，方便后续清理
    this.animationTimer = setTimeout(() => {
      this.setState({ animation: null });
    }, 1000);
  }
}

关键：组件卸载时清理定时器 #

这是解决警告的核心步骤——当组件卸载时，必须清除还在等待执行的定时器，避免它触发setState。在componentWillUnmount生命周期里添加清理逻辑：

componentWillUnmount() {
  // 如果定时器存在，就清除它
  if (this.animationTimer) {
    clearTimeout(this.animationTimer);
  }
}

可选：兼容旧代码的挂载标志方案（不推荐） #

如果因为某些原因你暂时不能替换componentWillReceiveProps，可以在组件里维护一个isMounted标志，用来判断组件是否还处于挂载状态，只有挂载时才执行setState：

constructor(props) {
  super(props);
  this.state = { animation: null };
  // 初始化挂载状态为false
  this.isMounted = false;
}

componentDidMount() {
  // 组件挂载后标记为true
  this.isMounted = true;
}

componentWillReceiveProps(nextProps) {
  if (this.props.totalVehicles !== nextProps.totalVehicles) {
    // 先检查组件是否还挂载
    if (this.isMounted) {
      this.setState({ animation: "cartCount" }, () => {
        setTimeout(() => {
          // 再次检查挂载状态
          if (this.isMounted) {
            this.setState({ animation: null });
          }
        }, 1000);
      });
    }
  }
}

componentWillUnmount() {
  // 组件卸载时标记为false
  this.isMounted = false;
}

⚠️ 注意：React官方并不推荐这种方式，因为它可能掩盖潜在的内存泄漏问题，优先使用前面的定时器清理方案。

进阶：函数组件用Hooks更省心 #

如果你正在使用函数式组件，直接用useEffect就能完美解决——它自带的清理机制会在组件卸载或依赖项变化时自动执行：

import { useState, useEffect } from 'react';

const Header = (props) => {
  const [animation, setAnimation] = useState(null);

  useEffect(() => {
    // 当totalVehicles变化时执行
    setAnimation("cartCount");
    const timer = setTimeout(() => {
      setAnimation(null);
    }, 1000);

    // 返回的函数就是清理逻辑，组件卸载或props更新时会自动调用
    return () => clearTimeout(timer);
  }, [props.totalVehicles]); // 依赖项：只有totalVehicles变化时才重新执行

  // ...你的组件渲染代码
};

这种方式不需要手动管理定时器和挂载状态，React会帮你处理好所有清理工作，代码也更简洁。

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