React 报错之 Can't perform a React state update on an unmounted component 的成因与对策

2023-11-26 06:41:22

React 错误：无法更新已卸载组件的状态

在 React 中，组件是我们构建用户界面的基本单元，每个组件都有自己的状态。当组件从组件树中移除（卸载）时，其状态将不再被跟踪，并且无法更新。如果在组件卸载后尝试更新其状态，就会抛出 Can't perform a React state update on an unmounted component 错误。

常见原因：

在组件卸载后调用了组件方法
在组件卸载后使用了组件状态
在组件卸载后设置了组件状态
在组件卸载后使用了组件生命周期方法

解决方案：

确保在组件卸载前取消所有未决的异步操作
在组件卸载时清除所有状态更新
使用生命周期方法 componentWillUnmount() 来清理组件状态
使用 useEffect() 钩子函数来处理异步操作并避免内存泄漏
使用 shouldComponentUpdate() 方法优化组件更新

使用 componentWillUnmount() 生命周期方法

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 清理组件状态
    this.setState({ count: 0 });

    // 取消所有未决的异步操作
    this.unmounted = true;
  }

  render() {
    return <div><h1>{this.state.count}</h1></div>;
  }
}

使用 useEffect() 钩子函数

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 发起异步请求
    const fetchCount = async () => {
      const response = await fetch('https://example.com/api/count');
      const data = await response.json();

      // 在组件卸载前检查组件是否已卸载
      if (!this.unmounted) {
        setCount(data.count);
      }
    };

    fetchCount();

    // 返回一个清理函数，在组件卸载时执行
    return () => {
      // 取消异步请求
      this.unmounted = true;
    };
  }, []);

  return <div><h1>{count}</h1></div>;
};

使用 shouldComponentUpdate() 方法

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较组件的 props 和 state，如果它们没有变化，则返回 false，阻止组件更新
    if (this.props === nextProps && this.state === nextState) {
      return false;
    }

    return true;
  }

  render() {
    return <div><h1>{this.state.count}</h1></div>;
  }
}