Блог

Я пытаюсь обновить переменную состояния при нажатии кнопки. но моя проблема в том, что она обновляется один раз с правильными данными, а затем снова обновляется с данными, определенными конструктором.

     constructor(props) {
        super(props);
        this.state = {
            popupshow: [{ check: false, id: '' }]

        }
    }

componentDidUpdate(prevProps, prevState) {
         console.log("this.state.popupshow",this.state.popupshow)

    }


Details(type){
   this.state.popupshow[i].id = type
   this.state.popupshow[i].check = true;

   this.setState({ popupshow: this.state.popupshow });
}

render() {
return (
  <a onClick={() => this.Details("Tv Series")}>Update </>
)
}
  

моя консоль.журнал выглядит следующим образом

Вы не должны обновлять состояние React напрямую. Вы всегда должны обновлять / устанавливать состояние реакции с помощью setState метода.

Эти строки противоречат принципу React

 this.state.popupshow[i].id = type
this.state.popupshow[i].check = true;
  

Обновите свой Details следующим образом

 Details(type){
   let { popupshow } = this.state;
   let i = 0;
   popupshow[i].id = type
   popupshow[i].check = true;

   this.setState({ popupshow });
}
  

Обратите внимание, что я не имею представления о переменной i , поэтому предположил, что как 0

Я думаю, вам следует переписать подробные функции, такие как :

 Details(type, i){
   const popupDetail = Object.assign([], this.state.popupshow);
   popupDetail[i].id = type
   popupDetail[i].check = true;

   this.setState({ popupshow: popupDetail });
}
  

вы устанавливаете popupshow: this.state.popupshow это вызывает принудительное обновление, которое повторно отображает компонент, следовательно, его значение сбрасывается.

Я полностью согласен с другими ответами, данными на этот вопрос, однако есть несколько вещей, которые стоит отметить, возможно, вы захотите добавить функцию в контекст. Аргумент в пользу добавления этих строк в конструктор заключается в том, что новые связанные функции создаются только один раз для каждого экземпляра класса. Вы также могли бы использовать

onClick={this.Details.bind(this, "Tv Series")}

или (ES6):

onClick={() => this.Details("Tv Series")} но любой из этих методов будет создавать новую функцию каждый раз при повторном рендеринге компонента.

Затем измените функцию на функцию со стрелкой, например

 Details(type, i){
   const popupDetail = Object.assign([], this.state.popupshow);
   popupDetail[i].id = type
   popupDetail[i].check = true;

   this.setState({ popupshow: popupDetail });
}