setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守

addEventListener和removeEventListener，回调不得为Anonymous内部类，并且它们应具有相同的参数

1. 取消中的所有异步操作 componentWillUnmount
2. 由于不赞成使用isMounted标志setState，因此在异步调用时检查组件已经卸载。
   

我想在Ajax请求的成功/失败回调中显示一个弹出窗口（引导模式）时，收到此警告。另外，setState无法正常工作，并且我的弹出模式没有显示。

以下是我的情况-

<Component /> (Containing my Ajax function)
    <ChildComponent />
        <GrandChildComponent /> (Containing my PopupModal, onSuccess callback)

我从孙组件中调用组件的ajax函数，并传递了onSuccess回调（在孙组件中定义），该回调将状态设置为显示弹出模式。

我将其更改为-

<Component /> (Containing my Ajax function, PopupModal)
    <ChildComponent />
        <GrandChildComponent /> 

相反，我调用setState（onSuccess回调）在组件（ajax回调）本身中显示弹出模式，并解决了问题。

在第二种情况下：组件被渲染两次（我在HTML中两次包含bundle.js）。

我遇到此问题是因为我在构造函数中使用setState而不是state。

例

更改以下错误代码

constructor(props) {
  super(props);
  this.setState({
    key: ''
  });
}

至

constructor(props) {
  super(props);
  this.state = {
    key: ''
  }; 
}

我通过为组件分配ref来解决此问题，然后在设置状态之前检查ref是否存在：

myMethod(){
  if (this.refs.myRef) 
   this.setState({myVar: true});
}

render() {
  return (
    <div ref="myRef">
      {this.state.myVar}
    </div>
  );
}

自从我更新了最新的React版本以来，我遇到了同样的问题。解决如下。

我的代码是

async componentDidMount() {
  const { default: Component } = await importComponent();
  Nprogress.done();
  this.setState({
    component: <Component {...this.props} />
  });
}

变成

componentWillUnmount() {
  this.mounted = false;
}
async componentDidMount() {
  this.mounted = true;
  const { default: Component } = await importComponent();
  if (this.mounted) {
    this.setState({
      component: <Component {...this.props} />
    });
  }
}