Question

尽管有警告，但有问题的setState电话仍然有效。警告仅在我正在调用setState的组件被删除后才会发生，然后重新呈现。为什么我在安装组件时会收到此警告？

<div id="contentArea"> {this.state.activePlugin?this.state.activePlugin.render():null} </div>

render方法返回一个react元素：

render(){ return <DatasetsList />; }

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

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

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

Answer 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')
);

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

Answer 2

警告是指我的组件的旧卸载实例，它仍在监听商店，如问题所示。只需取消订阅componentWillUnmount内的商店即可解决问题。

  componentWillUnmount() {
        this.unsubscribe();
    }

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

2 个答案: