react,異步setState警告如何解決?

封裝一個可以取消的api class
1.把所有的請求根據(jù)http方法封裝一次(get,post,put,delete)
2.

class ApiWithCancel {
  get = (url, params) => {
    //get為自己封裝的方法, 一下的post， put, del同理
    return this.makeCancelAble(get(url, params));
  }
  post = (url, params) => {
    return this.makeCancelAble(post(url, params));
  }
  put = (url, params) => {
    return this.makeCancelAble(put(url, params));
  }
  delete = (url, params) => {
    return this.makeCancelAble(fectchDel(url, params));
  }
  makeCancelAble = (promise) => {
    return new Promise(( resolve ) =>
      promise.then(val => !this.hasCanceled && resolve(val))
    );
  }
  cancel = () => {
    this.hasCanceled = true;
  }
}

3.在用到的組件里的constructor里，new一個這個class實例

this.api = new ApiWithCancel();

4.用的時候

const res = await this.api.get(url,params);

5.在組件卸載的時候取消

this.api.cancel()

注：代碼可能不能直接用，因為里面有封裝的，但是意思是這個意思，封裝成一個class，每次new一下就可以了。另外數(shù)據(jù)放在redux里也可以避免這種報警，但是這前提是你的這些數(shù)據(jù)或者動作是應(yīng)該放在redux里的。

沒有用到redux-thunk 或者redux-saga之類的中間件？
組件中調(diào)用ajax一般只有componentDidmount()中觸發(fā)，但也是交給redux來處理的。

出現(xiàn)你這種情況是你肯定在純函數(shù)中調(diào)用了ajax，這是拒絕的。

這個react官方已經(jīng)做了很詳細的討論了。 直接給你個代碼吧。

如果想知道來龍去脈， 戳這里 https://reactjs.org/blog/2015...

const makeCancelable = (promise) => {
  let hasCanceled_ = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
      error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled_ = true;
    },
  };
};

st cancelablePromise = makeCancelable(
  new Promise(r => component.setState({...}))
);

cancelablePromise
  .promise
  .then(() => console.log('resolved'))
  .catch((reason) => console.log('isCanceled', reason.isCanceled));

cancelablePromise.cancel(); // Cancel the promise