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

Question

我正在尝试在我的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 channel

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>
    );
},

Answer 1

您将缓存的上下文作为page传递，但是在handleSelectedContact()的第一行中，您还将参数page重新初始化为新的本地副本这个。