javascript - 使用postal.js更新React组件

我正在尝试在我的reactJs网站中使用postal.js订阅/发布数据，我目前正在这样做。谁能告诉我如何推送所选的ID，我认为loadContacts方法会将值重置为false：

这是我的顶层页面：

// load initial contacts into page
loadContacts: function() {
    var page = this;

    ContactDirectoryService.getContacts(this.state.pageNumber, function(response) {
        var contacts = response.contacts.map(function(contact){
            contact.isSelected = false;
            return contact;
        });

        page.setState({ contacts: contacts });

    });

},

// postal subscribe to receive publish
componentDidMount: function() {
    this.loadContacts();

    var page = this;

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

        page.handleSelectedContact(data.id, page);

    });
},

handleSelectedContact: function(id, page) {
    var page = this;

    // service to add contact using api call
    BasketService.addPerson(id, function () {

        console.log(id);
        var arrayPush = [];
        var arrayPush = page.state.selectedContacts.slice();

        // push selected id to selectedContacts array
        arrayPush.push(id);
        page.setState({selectedContacts: arrayPush})

        //add is selected to contacts
        page.setState({ contacts: contacts });

        // push selected id which isn't working
        for(var i=0;i<page.state.contacts.length;i++)
        {
            var idAsNumber = parseInt(id);

            if (page.state.contacts[i].id === idAsNumber) {
                page.state.contacts[i].isSelected = true;
                break;
            }
        }

        basketChannel.publish({
            channel: "basket",
            topic: "addContactToBasket",
            data: {
                id: id,
                newTotal: arrayPush.length
            }
        });

    });

},
addContactToBasket: function(selectedId) {
    console.log('Add ID');

            console.log('Add ID');
            BasketService.addPerson(selectedId, function () {
                var arrayPush = [];
            var arrayPush = this.state.selectedContacts.slice();

            arrayPush.push(selectedId);
            this.setState({selectedContacts: arrayPush})
            person.isSelected = true;

            basketChannel.publish({
            channel: "basket",
                topic: "addContactToBasket",
                data: {
                    id: selectedId,
                    newTotal: arrayPush.length
                }
            });
        });
},

复选框组件页面，用于选择ID并发布到selectedContact频道

handler: function(e) {

    e.target.value;
    e.preventDefault();

    channel.publish({
        channel: "contact",
        topic: "selectedContact",
        data: {
            id: e.target.attributes['data-ref'].value
        }
    });
},

render: function() {
    return (
        <div className="contact-selector">
            <input type="checkbox"
                checked={this.props.data.isSelected}
                onChange={this.handler} />
        </div>
    );
},

最佳答案

您以page传递缓存的上下文，但是在handleSelectedContact（）的第一行中，您还将参数page重新初始化为this的新本地副本。