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