Question

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

            };
        }
}

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

Answer 1

您在将组件安装到constructor之前设置状态，当道具更改时不会再次触发。为此，您可以使用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

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

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

我只是想象你如何使用boxOpen状态来展示一个例子;您可以使用render方法执行的任何操作来遵循相同的一般想法。

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

状态值不更新reactjs

2 个答案: