Question

我正在从事React js项目。我有一个状态变量，并在x_state方法期间用另一个普通变量（x）初始化了该状态变量（componentDidMount()）。但是，只要我的常规变量（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 Operator将本地对象的属性复制到状态变量。

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

Answer 3

ECMAScript 6 定义了七种数据类型： 六种原始数据类型：布尔值，空值，未定义，数字，字符串，符号和对象。

原始数据类型按值传递，而对象按传递参考。

因此，当您认为自己“分配” obj1 = obj2的值时，实际上是在（{obj1）中“指向” {obj2）中创建引用，因此（obj2）中的任何更改将自动在（obj1）中进行。您可以使用上述任何答案，也可以使用散布运算符，可以使用任何方法返回要复制的对象的浅表复制。这是一个有趣的post on the topic。

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

3 个答案: