在componentDidMount中请求数据触发setState警告的原因及解决方法

这个警告我太熟了！我来给你掰扯清楚前因后果和解决办法～

警告的成因 #

这个警告的核心原因很简单：你在componentDidMount里发起了一个异步的axios请求，但如果请求还没完成的时候，组件已经被卸载了（比如用户快速跳转到别的页面、或者组件被条件渲染移除了），这时候请求成功后调用setState，就会对着一个已经不存在的组件操作。React抛出这个警告，不仅是因为setState此时是无效操作，更重要的是它提示你可能存在内存泄漏——毕竟这个请求的回调还挂着，占用着不必要的内存资源。

正确的数据获取与state更新方式 #

针对类组件，有两种常用且可靠的解决思路：

方法一：用标志位跟踪组件挂载状态 #

我们可以给组件加一个实例变量，用来标记组件是否还处于挂载状态，只有当组件挂载时才执行setState：

componentDidMount() {
  // 组件挂载时标记为true
  this._isMounted = true;
  const apiBaseUrl = Config.serverUrl;
  
  axios.get(apiBaseUrl + '/dataToBeFetched/')
    .then(response => {
      // 先判断组件是否还挂载，再更新state
      if (this._isMounted) {
        this.setState({ data: response.data });
      }
    });
}

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

方法二：取消未完成的异步请求 #

更彻底的方式是在组件卸载时直接取消axios请求，这样请求完成后就不会进入回调执行setState了，从根源避免问题：

componentDidMount() {
  const apiBaseUrl = Config.serverUrl;
  // 创建axios的取消令牌源
  this.cancelTokenSource = axios.CancelToken.source();
  
  axios.get(apiBaseUrl + '/dataToBeFetched/', {
    // 绑定取消令牌
    cancelToken: this.cancelTokenSource.token
  })
  .then(response => {
    this.setState({ data: response.data });
  })
  .catch(error => {
    // 判断是否是主动取消的请求，避免误报错误
    if (axios.isCancel(error)) {
      console.log('请求已取消：', error.message);
    } else {
      // 在这里处理其他真实的请求错误
      console.error('请求失败：', error);
    }
  });
}

componentWillUnmount() {
  // 组件卸载时取消请求
  if (this.cancelTokenSource) {
    this.cancelTokenSource.cancel('组件已卸载，取消未完成的请求');
  }
}

这两种方法都能有效解决这个警告，其中第二种方式更推荐，因为它直接清理了异步任务，避免了不必要的网络请求和内存占用。

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