Question

我有两个组件，在父组件下处于同一级别，并且根据一个组件中发生的情况，我希望它触发另一个组件中发生的事情。

我的父母中有一个回调函数，并将其传递给了其中一个孩子。在子级中，单击图标时，我通过this.props.callback()调用回调函数，该回调函数返回并在父级中触发该函数。但是，当我尝试更新状态时却不断收到错误消息，以便当父项重新渲染时，其他组件的显示方式有所不同。

父母：

    getInitialState: function() {
        return {
            activeTab: undefined,
            messages: [],
            newMessage: undefined
        }
    },

    callback: function() {
        this.setState({
            "activeTab": "newChatTab"
        });
    },

    render: function() {
        const { activeTab, recentMessages, messages, newMessage } = this.state;

        return (

            <Modal>
                <div className="sms-chat-modal">
                    <ModalSC.Header>
                        <Icon name="commenting" color="white" />
                        SMS Chat
                        <Icon onClick={ this.handleClose } name="remove" color="white" float="right" />
                    </ModalSC.Header>
                    <ModalSC.Content>

                        <SMSChatLeftNav
                            recentMessages={ recentMessages }
                            callback={this.callback}
                        />

                        <div className="tabs-wrapper">

                            { activeTab == "newChatTab" ? <ChatTab messages={ messages } newMessage={ newMessage } /> : '' }

                        </div>
                    </ModalSC.Content>
                </div>
            </Modal>
       );
    }

孩子：

render: function() {
    return(
        <FilterInput className= "search-field" placeholder="Search Recent Contacts">

            <Icon onClick={this.props.callback()} name="edit" color="blue" />

        </FilterInput>
    )
}

错误：

Cannot update during an existing state transition

Answer 1

您在编写this.props.callback()时正在调用回调函数。只需将功能提供给onClick上的Icon即可，以便事件发生时可以调用该功能。

<Icon onClick={this.props.callback} name="edit" color="blue" />

回调未正确更新状态（ReactJS）

1 个答案: