回调未正确更新状态(reactjs)

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

我在父母中有一个回调函数,我将它传递给了其中一个孩子。在子级中,单击图标时,我通过调用回调函数 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