setState(...):只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState().这是一个无操作

Question

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().这是一个无操作.请检查未定义组件的代码.

我removeEventListener'已结束' componentWillUnmount,但它无效.因为我加this.setState({'time': remainTimeInfo});在componentDidMount.

Answer 1

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

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

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

Answer 2

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

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

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

并在componentWillUnmount调用this.cleanup().

Answer 3

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

例子

更改以下错误代码

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

到

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

Answer 4

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

正如警告所述，您正在调用this.setState一个已安装但此后已被卸载的组件。

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

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

以确保组件仍然安装。