React子组件不响应状态更改

我试图分解我的示例以使其保持简单。

这是我的代码：

import React from 'react';
import FeedColumnActionsNewPost from './FeedColumnActionsNewPost';
import FeedColumnActionsNewDogAction from './FeedColumnActionsNewDogAction';
class FeedColumnActions extends React.Component {
  constructor(props){
    super(props);
    this.toggleAction = this.toggleAction.bind(this);
    this.state = {
      new_action: this.props.new_action,
      new_post: "",
      new_dogAction: this.props.new_dog_action,
      new_dogActionClass: ""
    }
  }
  toggleAction(e){
    e.preventDefault();
    console.log(e.target.getAttribute('data-name'));
    if(e.target.getAttribute('data-name') == "newPost" && e.target.getAttribute("class") != "active"){
      this.setState({
        new_post: "active",
        new_action: !this.state.new_action
      });
    }else if(e.target.getAttribute('data-name') == "newPost" && e.target.getAttribute("class") == "active"){
      this.setState({
        new_post: "",
        new_action: !this.state.new_action
      });
    }else if(e.target.getAttribute('data-name') == "newDogAction" && e.target.getAttribute("class") != "active"){
      this.setState({
        new_dogActionClass: "active",
        new_dogAction: !this.state.new_dogAction
      });
    }else if(e.target.getAttribute('data-name') == "newDogAction" && e.target.getAttribute("class") == "active"){
      this.setState({
        new_dogActionClass: "",
        new_dogAction: !this.state.new_dogAction
      });
    }
  }
  render() {
    var that = this;
    return(
      <div>
        <div className="feed-action-box">
          <ul className="feed-action-bar">
            <li>
              <button onClick={this.toggleAction} className={this.state.new_post} data-name="newPost">
                <i data-name="newPost" className="fa fa-plus"></i>
                <span data-name="newPost">New Post</span>
              </button>
            </li>
            <li>
              <button onClick={this.toggleAction} className={this.state.new_dogActionClass} data-name="newDogAction" id="newDogAction">
                <i data-name="newDogAction" className="fa fa-paw"></i>
                <span data-name="newDogAction">New Dog Action</span>
              </button>
            </li>
          </ul>
        </div>
        { this.state.new_action ? <FeedColumnActionsNewPost /> : '' }
        { this.state.new_dogAction ? <FeedColumnActionsNewDogAction /> : '' }
      </div>
    );
  }
}
export default FeedColumnActions;

所以我有一个子组件，它通过主组件的props接收状态。当用户单击按钮以激活新动作时，状态将正确更新，并且子组件<FeedColumnActionsNewPost />将立即显示。该子组件包含一个表单->内容被发送到整个主组件，当提交表单时，主组件设置new_action: false。

当我在React Tools中检查整个过程时，主组件会正确地将新状态传递给子组件。并且子组件状态立即更改为：false。

虽然现在状态再次为假，但这条线似乎没有启动：

{ this.state.new_action ? <FeedColumnActionsNewPost /> : '' }

因此，此组件保持可见。

你知道为什么a的变化不会影响这条线吗？