React js状态变量自动更新，无需setstate方法

Question

我正在开发一个 React js 项目。我有一个状态变量，并在该方法期间x_state用另一个普通变量 ()初始化该状态变量 ( ) 。但每当我的普通变量 ( ) 更新时，它就会自动更新状态变量 ( )。xcomponentDidMount()xx_state

export class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x_state: null
    }
    this.x = {}
  }

  componentDidMount() {
    this.setState({
      x_state: this.x
    })
  }
}

局部变量 this.x 根据代码内的特定条件进行更新。每当局部变量 this.x 更新时，它都会自动更新状态变量 x_state。如何防止自动更新或自动setstate方法调用

Answer 1

这是因为x是一个对象，并且您正在通过此代码设置引用

this.setState({
   x_state: this.x
})

您应该使用它来复制它Object.assign()

this.setState({
      x_state: Ojbect.assign({},this.x)
})

或者，如果this.x最初是嵌套对象，您可以使用JSON.parse(JSON.stringify())

this.setState({
     x_state: JSON.parse(JSON.stringify(this.x))
})