无需setstate方法即可自动响应js状态变量更新

Question

我正在做一个React JS项目。 我有一个状态变量，并在componentDidMount()方法期间用另一个普通变量（ x ）初始化了该状态变量（ x_state ）。 但是，只要我的常规变量（ x ）得到更新，它就会自动更新状态变量（ x_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))
})

Answer 2

@Maheer Ali和@adiga是正确的。 由于状态变量x_state和局部变量this.x指向内存中的同一对象，因此它们都将一起更新。

您也可以使用Spread运算符将本地对象的属性复制到状态变量。

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

Answer 3

ECMAScript 6定义了七种数据类型： 六种原始数据类型 ：Boolean，Null，Undefined，Number，String，Symbol和Object 。

原始数据类型按值传递，而对象按引用传递。

所以，当你认为你“分配”的价值obj1 = obj2你实际上是在创建（参考obj1 ）朝（“指点” obj2 ），所以在（任何更改obj2 ）将自动进行（ obj1 ）。 您可以使用上述任何答案，也可以使用散布运算符，可以使用任何方法返回要复制的对象的浅表副本。 这是有关该主题的有趣文章 。