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

componentDidMount(prevProps, prevState, prevContext) {
    let [audioNode, songLen] = [this.refs.audio, List.length-1];

    audioNode.addEventListener('ended', () => {
        this._endedPlay(songLen, () => {
            this._currSong(this.state.songIndex);
            this._Play(audioNode);
        });
    });

    audioNode.addEventListener('timeupdate', () => {
        let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = [];

        if(!isNaN(audioNode.duration)) {
            remainTime = audioNode.duration - audioNode.currentTime;
            remainTimeMin = parseInt(remainTime/60);  // 剩余分
            remainTimeSec = parseInt(remainTime%60);  // 剩余秒

            if(remainTimeSec < 10) {
                remainTimeSec = '0'+remainTimeSec;
            }
            remainTimeInfo = remainTimeMin + ':' + remainTimeSec;
            this.setState({'time': remainTimeInfo});
        }
    });
}

componentWillUnmount () {
    let audio = this.refs.audio;
    audio.removeEventListener('timeupdate');
    audio.removeEventListener('ended');
}

错误：

警告：setState（...）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守。请检查未定义组件的代码。

我在中删除了“事件监听器” componentWillUnmount，但没有用。因为我添加this.setState({'time': remainTimeInfo});了componentDidMount。

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

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

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

removeEventListener与的签名相同addEventListener。所有参数必须完全相同才能删除侦听器。

var onEnded = () => {};
audioNode.addEventListener('ended', onEnded, false);

this.cleanup = () => {
  audioNode.removeEventListener('ended', onEnded, false);
}

并在componentWillUnmount中调用this.cleanup()。

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

例

更改以下错误代码

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

至

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

编辑：isMounted已弃用，可能会在更高版本的React中删除。看到此，isMounted是一个Antipattern。

作为警告状态，您呼叫this.setState的是一个组件上进行安装，但自那时以来已卸载。

为了确保您的代码安全，您可以将其包装

if (this.isMounted()) {
    this.setState({'time': remainTimeInfo});
}

以确保仍安装该组件。

自从更新了最新的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} />
    });
  }
}

我以前有这个问题，并根据React的官方页面isMounted是Antipattern解决了。

将属性isMounted标志设置为true componentDidMount，并将其设置为false componentWillUnmount。当您setState()在回调中时，请先检查isMounted！这个对我有用。

state = {
    isMounted: false
  }
  componentDidMount() {
      this.setState({isMounted: true})
  }
  componentWillUnmount(){
      this.setState({isMounted: false})
  }

打回来：

if (this.state.isMounted) {
 this.setState({'time': remainTimeInfo});}

这个线程中的许多答案都可以使用refs，但我认为一个完整的示例会很好。由于您通过使用事件侦听器并退出React上下文在实际的DOM节点上进行操作，因此应将ref视为标准解决方案。这是一个完整的示例：

class someComponent extends Component {
  constructor(props) {
    super(props)
    this.node = null
  }
  render() {
    return (
      <div ref={node => { this.node = node }}>Content</div>
    )
  }
  handleEvent(event) {
    if (this.node) {
      this.setState({...})
    }
  }
  componentDidMount() {
    //as soon as render completes, the node will be registered.
    const handleEvent = this.handleEvent.bind(this)
    this.node.addEventListener('click', handleEvent)
  }
  componentWillUnmount() {
    const handleEvent = this.handleEvent.bind(this)
    this.node.removeEventListener('click', handleEvent)
  }
}

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

我想在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）。

在audioNode.addEventListener的回调中使用具名的方法代替匿名函数应消除主题警告：

    componentDidMount(prevProps, prevState, prevContext) {
    let [audioNode, songLen] = [this.refs.audio, List.length-1];

    audioNode.addEventListener('ended', () => {
        this._endedPlay(songLen, () => {
            this._currSong(this.state.songIndex);
            this._Play(audioNode);
        });
    });

    audioNode.addEventListener('timeupdate', this.callbackMethod );
}

callBackMethod = () => {
    let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = [];

    if(!isNaN(audioNode.duration)) {
        remainTime = audioNode.duration - audioNode.currentTime;
        remainTimeMin = parseInt(remainTime/60);  // 剩余分
        remainTimeSec = parseInt(remainTime%60);  // 剩余秒

        if(remainTimeSec < 10) {
            remainTimeSec = '0'+remainTimeSec;
        }
        remainTimeInfo = remainTimeMin + ':' + remainTimeSec;
        this.setState({'time': remainTimeInfo});
    }
}

是的，无论如何都需要命名方法，因为它removeEventListener不能与匿名回调一起使用，如上所述。

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