ReactJs错误-警告:setState(..):只能更新已挂载或正在挂载的组件

ReactJs error - Warning: setState(...): Can only update a mounted or mounting component

本文关键字:组件 更新 警告 错误 setState ReactJs      更新时间:2023-09-26

我得到这个错误,谁能告诉我如何进一步调试这个?

警告: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函数中的邮政通道。

似乎从您的问题片段中缺少违规代码,如果您将所有代码发布在我可以查看它并告诉您具体在哪里您仍然"订阅"到不再安装的组件上的邮政事件