ReactJs错误-警告:setState(..):只能更新已挂载或正在挂载的组件
ReactJs error - Warning: setState(...): Can only update a mounted or mounting component
我得到这个错误,谁能告诉我如何进一步调试这个?
警告:setState(…):Can only update a mounted or mounted组件。这通常意味着在未挂载的服务器上调用setState()组件。
有人能帮忙吗?
这是导致错误的组件:
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是我使用post .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: function() {
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();
});
},
为根div添加一个ref属性,并在调用setState之前检查该ref值。这将确保组件被挂载。
render: function() {
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;
你正在错误地使用react。React是为组件化而构建的,所以你会希望在组件中做任何事情。
当你设置你的应用程序时,你会想要在每个组件的getInitialState
中使用postal的订阅。然后,取消订阅componentWillUnmount
函数中的邮政通道。
似乎从您的问题片段中缺少违规代码,如果您将所有代码发布在我可以查看它并告诉您具体在哪里您仍然"订阅"到不再安装的组件上的邮政事件
相关文章:
- 调度没有'无法立即更新组件
- React js更改状态不会更新组件
- 如何使用JavaScript更新JSP页面的一些组件
- 如何在加载Angular2.RC1子组件时更新它
- ReactJS组件中显示的视频未更新
- 如何创建独立于数组更新的组件列表
- 组件道具更改后更新redux存储
- 如果我不应该在组件WillUpdate中调用setState,如何更新状态(使用ReactJS)
- React 应该组件更新太多的递归
- 在PrimeFaces中的某些组件更新时自动调用javascript
- 反应:不必要的组件更新
- 通过子组件更新父数据
- 余烬子组件通过父组件更新来自查询参数的属性
- 从子组件更新父组件
- 从React组件更新模型/集合
- 通过React Native中的子组件更新父组件
- Angular 2更改检测,ngClass模型由同级组件更新,但模板确实更新了'不要精神抖擞
- 如何从父组件更新子组件的状态
- React - 如何在组件更新后获取真正的 DOM 元素
- 淘汰组件更新未被父视图模型订阅的可观察对象