Ошибка ReactJs - Предупреждение: setState (...): Может только обновлять смонтированный или монтажный компонент

Question

Я получаю эту ошибку, может кто-нибудь рассказать мне, как я могу отладить это дальше?

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

Может ли кто-нибудь помочь?

Это мой компонент, который вызывает ошибку:

var postal = require('postal'), 
contactChannel = postal.channel("contact"), 
React = require('react'); 

var ContactSelector = React.createClass({ 

getInitialState: function() { 
    return { 
     selectedContacts:[] 
    }; 
}, 

handleChange: function(e) { 
    var id = e.target.attributes['data-ref'].value; 

    if (e.target.checked === true){ 
     contactChannel.publish({ 
        channel: "contact", 
        topic: "selectedContact", 
        data: { 
         id: id 
        }}); 

    } else{ 
     contactChannel.publish({ 
      channel: "contact", 
      topic: "deselectedContact", 
      data: { 
       id: id 
      } 
     }); 

    } 
}, 

render: function() { 

    var id = this.props.data.id; 
    var isSelected = this.props.data.IsSelected; 

    return (
     <div className="contact-selector"> 
      <input type="checkbox" 
       checked={isSelected} data-ref={id} 
       onChange={this.handleChange} /> 
     </div> 
    ); 
} 

}); 
module.exports = ContactSelector; 

contactChannel является каналом я установки с помощью postal.js, https://github.com/postaljs/postal.js

contactChannel.subscribe("selectedContact",function (data, envelope) { 

     page.setPersonIsSelectedState(data.id, true); 

     basketChannel.publish({ 
      channel: "basket", 
      topic: "addPersonToBasket", 
      data: { 
       personId: data.id 
      } 
     }); 
    }); 

Я Подпишитесь на публикацию в componentDidMount на моей родительской странице:

componentDidMount: function() { 
    var page = this; 
    this.loadContacts(); 

    page.subscribeEvents(); 
}, 

Слушатели:

subscribeEvents: функция() {

var page = this; 

    page.subscribeToChannel(filterChannel, "searchFilterChange", this.listenerForSearchFilterChanged); 

    contactChannel.subscribe("pageSizeChanged", this.listenerForSizeChanged); 


    page.subscribeToChannel(filterChannel, "genderFilterChange", this.listnerForGenderFilterChange); 

    page.subscribeToChannel(filterChannel, "rollModeFilterChange", this.listnerForRollModeFilterChange); 

    page.subscribeToChannel(filterChannel, "attendanceModeFilterChange", this.listnerForAttendanceModeFilterChange) 

    page.subscribeToChannel(filterChannel, "messageToFilterChange", this.listnerForMessageToFilterChange); 

    contactChannel.subscribe("selectAll", function (data) { 
     page.loadContacts(); 
    }); 


    contactChannel.subscribe("selectedContact",function (data, envelope) { 

     page.setPersonIsSelectedState(data.id, true); 

     basketChannel.publish({ 
      channel: "basket", 
      topic: "addPersonToBasket", 
      data: { 
       personId: data.id 
      } 
     }); 
    }); 

    contactChannel.subscribe("selectAll", function (data, envelope) { 

     basketChannel.publish({ 
      channel: "basket", 
      topic: "selectAll", 
      data: { 
       selectAll: data.selectAll 
      } 
     }); 

    }); 

    contactChannel.subscribe("refreshContacts", function (data, envelope) { 
     page.loadContacts(); 

    }); 
}, 

Answer 1

Вы собираетесь об использовании реагируют неправильно. Реакция построена так, чтобы быть компонентной, поэтому вы захотите делать все в компонентах.

Когда вы настраиваете приложение, вы захотите использовать подписку на почтовый индекс внутри каждого из ваших компонентов «getInitialState». Затем отмените подписку на почтовые каналы в функциях componentWillUnmount.

Похоже, что код нарушения отсутствует в фрагментах вашего вопроса, если вы разместите весь свой код, я мог бы посмотреть на него и сказать вам, где вы по-прежнему «подписаны» на почтовое событие на компоненте, который больше не монтируется.

Answer 2

Добавьте атрибут ref в свой корневой раздел и проверьте его значение перед вызовом setState. Это позволит убедиться, что компонент смонтирован.

визуализации: функция() {

var id = this.props.data.id; 
var isSelected = this.props.data.IsSelected; 

return (
    <div ref='some_ref' className="contact-selector"> 
     <input type="checkbox" 
      checked={isSelected} data-ref={id} 
      onChange={this.handleChange} /> 
    </div> 
); 

}

затем вызвать SetState, как показано ниже

this.refs.some_ref ? this.setState({yourState:value}): null;