在React js中如何在不重新渲染组件的情况下使用setstate？

Question

constructor(props, context) {
super(props);
this.state = {
ShowVoucher: false
 }

我想更改 showVoucher 的状态。无需重新渲染组件。我已经尝试过了

componentDidUpdate(prevState) {
if(prevState.showVoucher!= this.state.showVoucher){
  this.setState({ ShowVoucher: false})
}
  }

但是我的代码陷入了无限循环。我该如何解决？ 任何其他解决方案都欢迎。

Answer 1

如果您要存储一个值，但不希望在该值更改时重新渲染组件，则该状态不应处于此状态。它应该只是一个实例变量，例如

constructor(props, context) {
    this.ShowVoucher = false;
}

然后

this.ShowVoucher = true;

请勿将事物置于状态，然后尝试阻止其更改导致重新渲染。那是一种反模式。

Answer 2

也许您正在寻找的是shouldComponentUpdate
https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.showVoucher!==nextState.showVoucher){
   this.setState({ ShowVoucher: false})
   return false;
  } else return true;
}