Javascript 使用setState ReactJs更新状态

我试图在单击按钮时更新状态变量。但我的问题是，它用正确的数据更新了一次，然后又用构造函数定义的数据更新了一次

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

构造函数（道具）{
超级（道具）；
此.state={
弹出窗口：[{检查：错误，id:''}]
}
}
componentDidUpdate（prevProps、prevState）{
log（“this.state.popushow”，this.state.popushow）
}
详细信息（类型）{
this.state.popushow[i].id=type
this.state.popupshow[i].check=true；
this.setState（{popushow:this.state.popushow}）；
}
render（）{
返回(
我认为您应该重写以下详细功能：

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

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

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重新呈现组件，因此其值将被重置。
我认为您应该重写详细信息函数，如：

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

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

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重新呈现组件，因此其值被重置。
您不应直接更新React状态。您应始终通过
setState
方法更新/设置React状态

这些台词与原则背道而驰

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

更新您的
详细信息
，如下所示

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

   this.setState({ popupshow });
}

注意：我不知道变量
I
，因此假设作为
0
您不应该直接更新React状态。您应该始终通过
setState
方法更新/设置React状态

这些台词与原则背道而驰

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

更新您的
详细信息
，如下所示

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

   this.setState({ popupshow });
}

注：我不知道变量
I
，因此假设作为
0
，我完全同意对该问题给出的其他答案，但有几点值得注意的是，您可能需要将函数添加到上下文中。
赞成将这些行添加到构造函数的理由是，新绑定函数在类的每个实例中只创建一次

onClick={this.Details.bind（这个“电视剧”）}

或（ES6）：

onClick={（）=>this.Details（“电视剧”）}
但这两种方法中的任何一种都会在每次重新呈现组件时创建一个新函数

然后将功能更改为箭头功能，就像

我完全同意这个问题的其他答案，但是有几件事值得注意，那就是你可能想在上下文中添加函数。
赞成将这些行添加到构造函数的理由是，新绑定函数在类的每个实例中只创建一次

onClick={this.Details.bind（这个“电视剧”）}

或（ES6）：

onClick={（）=>this.Details（“电视剧”）}
但这两种方法中的任何一种都会在每次重新呈现组件时创建一个新函数

然后将功能更改为箭头功能，就像