反应 setState 不改变状态

Question

我有一个 App 组件，它的状态包含一个属性 "faces" ，它在一个对象之后初始化

const initFaces = {
  left : [[0,0,0],[0,0,0],[0,0,0]],
  front : [[1,1,1],[1,1,1],[1,1,1]],
  right : [[2,2,2],[2,2,2],[2,2,2]],
  back : [[3,3,3],[3,3,3],[3,3,3]],
  up : [[4,4,4],[4,4,4],[4,4,4]],
  down : [[5,5,5],[5,5,5],[5,5,5]]
};

class App extends React.component{
 ... 
 this.state = {
   faces : initFaces
 }
 ...
}

现在我的应用程序不断改变“faces”属性的状态，所以我尝试实现一个按钮将其恢复到原始状态。 这就是我所拥有的：

this.setState({
  faces : initFaces
})

但这不起作用，而这样做：

this.setState({
  faces : {
    left : [[0,0,0],[0,0,0],[0,0,0]],
    front : [[1,1,1],[1,1,1],[1,1,1]],
    right : [[2,2,2],[2,2,2],[2,2,2]],
    back : [[3,3,3],[3,3,3],[3,3,3]],
    up : [[4,4,4],[4,4,4],[4,4,4]],
    down : [[5,5,5],[5,5,5],[5,5,5]]
  }
})

为什么它不能简单地通过引用与我刚刚复制的内容相同的对象来工作？

Answer 1

发生此问题是因为您在初始化状态时传递了对initFaces的引用，因此每当faces发生变化时（假设您以某种方式直接改变this.state.faces ， 这是不建议的），您实际上是在更改initFaces引用的同一对象。

您可以通过在设置状态时执行initFaces的浅拷贝来解决您的问题（为此，您可以使用传播语法）：

class App extends React.component{
 ... 
 this.state = {
   faces : { ...initFaces }
 }
 ...
}

并且还在您的按钮实现中恢复更改：

this.setState({
  faces : { ...initFaces }
})

但是，如果您确实要直接改变状态，请考虑重构您的代码以仅通过setState更改状态。