反应：“只能更新已安装或正在安装的组件。”答案

【问题标题】：react: "Can only update a mounted or mounting component."反应：“只能更新已安装或正在安装的组件。”
【发布时间】：2016-02-02 16:51:52
【问题描述】：

尽管有警告，有问题的setState 调用仍在工作。警告仅在我调用setState 的组件被删除并重新渲染后才会出现。为什么我会收到此警告当组件已安装时？

<div id="contentArea">

     {this.state.activePlugin?this.state.activePlugin.render():null}

</div>

render 方法返回一个反应元素：

render(){ 

    return <DatasetsList />;

}

state.activePlugin 设置为 null 并重新呈现包含上述 jsx 代码的组件，这就是删除“activePlugin”的方式。当再次调用 render 并第二次返回 <DatasetsList /> 时，组件内的后续单击会产生此警告，尽管它们发起的 setState 调用实际上按预期工作。

换句话说，警告似乎具有误导性，因为代码按预期工作。

 componentDidMount() { 
        this.unsubscribe = this.props.store.listen(s=>{
          this.setState(s);
        });
    }

【问题讨论】：

你能加一些代码sn-p来说明吗？
但您未能添加任何调用setState的代码
已添加，但不确定它将如何帮助您。
警告似乎是正确的，因为带有 id#contentArea 的父节点仍然存在于 dom 中。
实际上答案就在最后一段代码中。由于未调用取消订阅，旧实例仍在侦听。看我的回答。

标签： reactjs

【解决方案1】：

https://jsfiddle.net/taylorallred/69z2wepo/29874/

var Hello = React.createClass({
  getInitialState: function() {
    return {
      activePlugin: Plugin
    }
  },

  togglePlugin: function() {
    this.setState({
      activePlugin: this.state.activePlugin ? null : Plugin
    })
  },

  render: function() {
    return <div >
      < div onClick = {
        this.togglePlugin
      } > Hello {
        this.props.name
      } < /div> < div > {
        this.state.activePlugin ? < Plugin / > : null
      } < /div> < /div>;
  }
});

var Plugin = React.createClass({
  render: function() {
    return ( < MyComponent / > );
  }
});

var MyComponent = React.createClass({
  getInitialState:function(){
    return {a: 1};
  },
    componentDidMount:function(){
     window.setInterval(function(that){that.setState({a: that.state.a++})}, 2000, this);
  },

    render: function() {
        var a = this.state.a;
    return <div > MyComponent { a }< /div>;
  }
});

ReactDOM.render( < Hello name = "World" / > ,
  document.getElementById('container')
);

这可能是因为您的组件在未渲染时正在接收更新，并且该组件正在尝试渲染，因为它的状态已更改。见小提琴。单击以删除组件，您将在控制台中收到该错误。

【讨论】：

已经读过那个了。这不相关 - 我的组件已安装。
然后贴出你的代码，否则就太模糊了

【解决方案2】：

警告指的是我的组件的旧未安装实例，它仍在监听存储，如问题所示。只需从 componentWillUnmount 内的商店退订即可解决问题。

  componentWillUnmount() {
        this.unsubscribe();
    }

【讨论】：