React需要2次点击子组件才能更改其状态

Question

我有一个父组件，它通过props在子组件中设置状态。

this.state = {
  addGroup: false,
}
buildGroupList = () => {
  const { addGroup } = this.state;
  return (
    <GroupListView onAdd={addGroup} />
  )
}

点击触发后呈现子组件

<TitleActionButton className="active" onClick={this.onAddGroupAction}>Add </...>

onAddGroupAction = () => {
   this.setState({ addGroup: !this.state.addGroup })
 }

我的子组件正在接收道具并将其设置为本地状态

componentWillReceiveProps(props) {
   this.setState({ isOnAddGroup: props.onAdd });
}

if (isOnAddGroup) return this.buildAddGroupView();

，并且在某些情况下需要将此状态设置为false

onCancelAction = () => {
   this.setState({ isOnAddGroup: false, isOnEditGroup: false })
}

我不明白的是为什么我必须两次单击“触发”按钮（位于父组件中）才能更改状态并因此渲染我的子组件。

有什么想法吗？