Question

我收到此错误有人可以告诉我如何进一步调试吗？

警告：setState（...）：只能更新已安装或已安装零件。这通常意味着您在已卸载时调用了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是我使用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：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();

    });
},

Answer 1

将ref属性添加到根div，并在调用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;

Answer 2

您正在使用不正确的反应。 React是为了组件化而构建的，所以你想要在组件中做所有事情。

当您设置应用时，您会想要在每个组件内使用邮政订阅＆＃39; stroke。然后，取消订阅getInitialState函数中的邮政渠道。

您的问题中的代码段中似乎缺少有问题的代码，如果您发布所有代码，我可以查看它，并具体告诉您哪些人仍在＆＃34;订阅＆＃34;到不再安装的组件上的邮件事件。

ReactJs错误 - 警告：setState（...）：只能更新已安装或安装的组件

2 个答案: