使用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

我認為您應該重寫類似的詳細功能：

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重新渲染組件，因此其值將被重置。

Answer 2

您不應該直接更新React狀態。 您應該始終通過setState方法更新/設置React狀態。

這些行違反了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 3

我完全同意針對該問題的其他答案，但是，值得注意的是您可能想將函數添加到上下文中。 支持將這些行添加到構造函數的觀點是，每個類的實例僅創建一次新的綁定函數。 您也可以使用

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