реагировать: «Может обновлять только смонтированный или монтажный компонент».

Question

Ответ на вопрос setState работает несмотря на предупреждение. Предупреждение происходит только после удаления компонента, на котором я звоню setState, а затем повторно. Почему я получаю это предупреждение , когда компонент уже установлен?

<div id="contentArea"> 

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

</div> 

визуализации метод возвращает элемент среагировать:

render(){ 

    return <DatasetsList />; 

} 

state.activePlugin устанавливается в нуль, и компонент, содержащий код JSX выше rerendered, это то, как извлекать «» 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(); 
    }