当setstate调用时组件已被卸载或者还未被didmount

[ZWkang]

当还没被挂载或者已经被卸载的组件调用setState会得到一个警告

例子:

https://codesandbox.io/s/jvroxlzjp5

而这种情况。我们可以用一个状态量来将其设置是否允许setState

例子:

https://codesandbox.io/s/x2vxk9km7p

使用高阶做一下封装

https://codesandbox.io/s/30q2l75n51

不过React官方是建议 https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

建议在异步调用setState处做出处理。

例如

class MyComponent extends React.Component {
  componentDidMount() {
    mydatastore.subscribe(this);
  }
  render() {
    ...
  }
  componentWillUnmount() {
    mydatastore.unsubscribe(this);
  }
}

订阅后取消订阅

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;
    },
  };
};

让promise的链式调用可以被取消