状态值不更新 reactjs答案

【问题标题】：State value not updating reactjs状态值不更新 reactjs
【发布时间】：2017-03-17 22:08:29
【问题描述】：

class RaisablePaper extends Component {
        constructor(props) {
            super();
            this.state = {
                state1: "state1",
                openNow: props.boxOpen,

            };
        }
}

我正在尝试通过 <RaisablePaper boxOpen={this.state.dOpen}/> 向此类发送价值。但是，每当 dOpen 发生更改时，它似乎都不会更新 openNow。非常感谢您的帮助。

【问题讨论】：

好吧 dOpen 只是父状态变量，它正在从父状态更改。

标签： javascript reactjs jsx

【解决方案1】：

你是在constructor中设置组件挂载前的状态，当props改变时不会再次触发。为此，您可以使用 React 的 componentWillReceiveProps，它将在新的 props 发送到组件时调用。

class RaisablePaper extends Component {
  constructor(props) {
    super();
    this.state = {
      state1: "state1",
      openNow: props.boxOpen
    };
  }
  componentWillReceiveProps(props) {
    this.setState({
      openNow: props.boxOpen
    });
  }
}

【讨论】：

这是我一直在寻找的东西，但不幸的是不知道它的名字。非常感谢
很高兴我能帮上忙。看看the documentation for React's lifecycle methods，他们真的很有帮助。

【解决方案2】：

直接使用道具会更简单，而不是担心将其同步到您的状态。一般来说，尽可能多地依赖 props 是个好主意，并且只在绝对必要时才涉及 state。

但是 Fabian Schultz 是绝对正确的——你的构造函数只运行一次，在组件被挂载之前，所以如果组件依赖于在构造过程中初始化的状态，你将永远不会收到后续更新。

我只是在想象您如何使用boxOpen 状态来展示一个示例；无论您的 render 方法正在做什么，您都可以遵循相同的总体思路。

class RaisablePaper extends Component {
  render() {
    return (
      <div className={this.props.boxOpen ? 'is-open' : ''}>
        Here's some content...
      </div>
    );
  }
}

【讨论】：