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进行了突变，which is not advised），实际上您正在更改initFaces引用的同一对象。

您可以通过在设置状态时执行class App extends React.component{ ... this.state = { faces : { ...initFaces } } ... }的浅表副本来解决问题（为此，您可以使用spread syntax）：

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

还可以在按钮的实现中还原更改：

(0,1,2 etc)

But if you are indeed directly mutating the state, consider refactoring your code to only change the state by means of setState。

反应setState不更改状态

1 个答案: