Обновление состояния с помощью setState ReactJs

Question

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

    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 </>
)
}

мой console.log похож наниже

Answer 1

Вы не должны обновлять состояние React напрямую.Вы должны всегда обновлять / устанавливать состояние 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

Answer 2

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

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 });
}

Answer 3

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

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, это вызывает forceupdate, которая повторно отображает компонент, следовательно, его значение сбрасывается.