Государство не меняется в реакции

Question

Привет всем, кого я только что изучил, реагируют и имеют следующую проблему: Когда я изменяю hideFormAdd в приложении. js, statusForm в FormAdd. js получает только первое неизмененное значение по умолчанию.

//file App.js
<TaskForm open={this.state.hideFormAdd}></TaskForm>

//file FormAdd.js
constructor(props) {
      super(props);
      this.state = {
        statusForm: this.props.open
      }
    }

Answer 1

Это потому, что конструктор не вызывается при последующих рендерингах, он вызывается только один раз для инициализации компонента. Чтобы обновить свое состояние при изменении свойств, вы должны реализовать componentDidUpdate .

componentDidUpdate(prevProps) {
  if (this.props.open !== prevProps.open) {
    this.setState({statusForm: this.props.open});
  }
}

. Обратите внимание, что в этом примере вам, возможно, вообще не нужно использовать state, вы можете возможно, просто обратитесь к this.props.open в своем компоненте, что исключает сложность управления обновлениями реквизита.

Answer 2

Как сказал FMCorz, вы можете сделать это внутри componentDidUpdate (). а также вы можете сделать в render (), а также

    render() {
        var statusForm= this.props.open;

     }

Answer 3

в вашем компоненте приложения, вы должны сделать функцию для изменения состояния.

state = {
  hideFormAdd: true,
}
handleHideForm(){
  this.setState({hideFormAdd: !this.state.HideFormAdd})
}

в вашей функции рендеринга:

<button onClick={()=> this.handleHideForm()}> hide/show </button>
<TaskForm open={this.state.hideFormAdd}></TaskForm>

теперь в вашей TaskForm компонент, вам не нужно использовать состояние, вы можете использовать this.props.open без того, чтобы сделать ее значение в состоянии