javascript - React 子组件不对状态变化使用react

Question

这个问题已经有答案了:

How can i keep state in a React component using ES6 (4 个回答)

已关闭 7 年前。

我尝试分解我的示例以使其简单。

这是我的代码:

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。

尽管状态现在再次为 false，但这条线似乎没有触发:

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

因此该组件保持可见。

有什么想法为什么 a 的改变不会影响这一行吗？

Answer 1

如果您从 props 派生任何 state，您可能需要实现 componentWillReceiveProps(nextProps)组件的生命周期方法。

简单地说，这就是 this.setState(nextProps)，它将用传入的 props 覆盖任何本地状态。

或者，您可以选择:this.setState({ new_action: nextProps.new_action })等