状态值不更新 reactjs

Question

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

            };
        }
}

我正在尝试通过 <RaisablePaper boxOpen={this.state.dOpen}/> 向此 class 发送值。但无论何时 dOpen 发生变化，它似乎都不会更新 openNow。非常感谢帮助。

Answer 1

您正在设置 constructor 中安装组件之前的状态，当 props 更改时不会再次触发。为此，您可以使用 React 的 componentWillReceiveProps，当新道具发送到组件时将调用它。

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

Answer 2

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

但是 Fabian Schultz 是完全正确的——你的构造函数只运行一次，在组件安装之前，所以如果组件依赖于在构造期间初始化的状态，你将永远不会收到后续更新。

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

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

状态值不更新 reactjs

State value not updating reactjs

javascript

jsx

reactjs