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

Question

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

我的父级中有一个回调函数，我将其传递给了其中一个子级。在子项中，当单击 Icon 时，我通过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()时正在调用回调函数。只需改为在Icon上onClick函数，以便在事件发生时调用该函数。

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