Question

我只是开发了一个SPA，需要帮助我将react componentDidMount发送到我的服务器端（节点）的异步请求。查询有效，但如果我快速更改到不同的页面，则ajax响应中的setState函数仍在运行。虽然组件是卸载的。

只能更新已安装或安装的组件。这通常意味着你在一个卸载的组件上调用了setState（）。这是一个无操作。请检查未定义组件的代码。

为避免此错误，我想中止/取消我在componentWillUnmount上发送的请求，如果这是正确的方法。

我尝试使用xml和axios，但它不起作用。我希望你有一个可行的榜样。我打开其他请求方法，如fetch或其他东西。

代码看起来像这样（Axios），但它没有取消请求：

import * as React from 'react';
import axios from 'axios';

let CancelToken = axios.CancelToken;
let source = CancelToken.source();

class MakeAjaxRequest extends React.Component {
  constructor() {
    super();
    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    const that = this;

    axios.get('/user/12345', {
      cancelToken: source.token
    })
      .then(function (response) {
        if (axios.isCancel(response)) {
          console.log('Request canceled', response);
        } else {
          that.setState({
            data: response.data
          });
        }
      })
      .catch(function (thrown) {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          // handle error
        }
      });
  }

  componentWillUnmount() {
    source.cancel('Operation canceled by the user.');
  }

  //....other stuff, like render the data
}

Answer 1

Axios可以选择取消请求：

https://github.com/axios/axios#cancellation

在卸载组件后阻止setState在某种回调上触发的另一种方法是使用一个本地布尔变量来存储组件是否已挂载，即

componentDidMount(){
   this._mounted = true;
}

componentWillUnmount() {
   this._mounted = false;
}

然后在axios回调中检查_mounted是否为真，然后再尝试拨打setState()

反应中止/取消AJAX请求。 Axios或XHR

1 个答案: