组件卸载后异步仍运行引发setState报错，如何取消该setState操作？

我编写了如下异步函数：

componentDidMount() { 
  someAsyncFunction().then((data) => { 
    this.setState({ something: data }); 
  }); 
}

当返回上一页面时，会触发如下警告：

Warning: Can't call setState (or forceUpdate) on an unmounted component.

请问当异步操作仍在运行时返回上一页面，是否有办法取消该setState()操作？

当然有办法解决这个问题啦！这是React类组件里非常常见的场景，核心思路就是避免在组件卸载后执行setState，下面给你几种实用的实现方案：

方案一：用实例变量标记组件挂载状态 #

这是最容易上手的方案，我们只需要给组件加一个变量来跟踪它是否还处于挂载状态：

class YourComponent extends React.Component {
  // 初始化标记为未挂载
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    someAsyncFunction().then((data) => {
      // 只有组件还挂载着，才执行setState
      if (this._isMounted) {
        this.setState({ something: data });
      }
    });
  }

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

这个方法不需要改动你的异步函数，代码量少，适合大多数普通场景。

方案二：直接取消异步请求（如果支持的话） #

如果你的someAsyncFunction是网络请求类的异步操作，并且使用的库支持取消（比如原生fetch、Axios），那直接取消请求会更彻底，还能节省不必要的网络资源：

原生Fetch + AbortController #

class YourComponent extends React.Component {
  _abortController = null;

  componentDidMount() {
    this._abortController = new AbortController();
    fetch('/your-target-api', {
      signal: this._abortController.signal
    })
    .then(res => res.json())
    .then(data => {
      this.setState({ something: data });
    })
    .catch(error => {
      // 请求被取消时会抛出AbortError，我们可以直接忽略这个错误
      if (error.name !== 'AbortError') {
        // 在这里处理其他类型的请求错误
        console.error('Request failed:', error);
      }
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消请求
    this._abortController?.abort();
  }
}

Axios + CancelToken #

import axios from 'axios';

class YourComponent extends React.Component {
  _cancelTokenSource = null;

  componentDidMount() {
    this._cancelTokenSource = axios.CancelToken.source();
    axios.get('/your-target-api', {
      cancelToken: this._cancelTokenSource.token
    })
    .then(res => {
      this.setState({ something: res.data });
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        // 请求被取消，无需额外处理
        console.log('Request canceled:', error.message);
      } else {
        // 处理其他请求错误
        console.error('Request failed:', error);
      }
    });
  }

  componentWillUnmount() {
    // 取消请求
    this._cancelTokenSource?.cancel('Component unmounted, cancel request');
  }
}

方案三：迁移到函数组件用Hooks处理（推荐） #

如果你的组件可以改成函数组件，用useEffect的清理函数会更优雅，React会自动帮我们管理生命周期：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [something, setSomething] = useState(null);

  useEffect(() => {
    let isMounted = true;

    // 定义异步逻辑
    const fetchData = async () => {
      const data = await someAsyncFunction();
      // 只有组件挂载时才更新状态
      if (isMounted) {
        setSomething(data);
      }
    };

    fetchData();

    // 清理函数：组件卸载时自动执行
    return () => {
      isMounted = false;
    };
  }, []);

  // ...你的组件渲染逻辑
}

不管用哪种方案，核心都是确保组件卸载后不再执行setState，这样就能彻底消除那个烦人的警告啦！

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