Javascript 反应-默认状态

我有一个关于React的问题要问你

我想知道为什么我的代码不能正常工作：

const DEFAULT_STATE = {
  disabledItems: [],
  wordToGuess: mots[Math.floor(Math.random() * mots.length)],
  mistakes: 0,
  lose: false,
  win: false,
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { ...DEFAULT_STATE }
  }

  //Arrow function for binding
  //Restart the game
  resetGame = () => {
    this.setState({ ...DEFAULT_STATE })
  }

问题是调用resetGame时，我的两个状态disabledItems和wordToGuess没有重置

相反，这是当前正在工作的代码：

const DEFAULT_STATE = {
  mistakes: 0,
  lose: false,
  win: false,
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...DEFAULT_STATE,
      disabledItems: [],
      wordToGuess: mots[Math.floor(Math.random() * mots.length)],
    }
  }

  //Arrow function for binding
  //Restart the game
  resetGame = () => {
    this.setState({
      ...DEFAULT_STATE,
      disabledItems: [],
      wordToGuess: mots[Math.floor(Math.random() * mots.length)],
    })
  }

在这里，一切都很好

---

这是一个参考问题吗？请帮我理解：）！非常感谢

之所以发生这种情况，是因为您只声明了一次默认的\u状态对象，并且所有项目都存储在内存中，并且您的resetGame只链接到这个创建的一次对象

但是你可以做一个函数，它每次都会建立你的状态

例如：

const buildState = () => ({
  disabledItems: [],
  wordToGuess: mots[Math.floor(Math.random() * mots.length)],
  mistakes: 0,
  lose: false,
  win: false,
});

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { ...buildState() }
  }

  //Arrow function for binding
  //Restart the game
  resetGame = () => {
    this.setState({ ...buildState() })
  }

---

之后，每次调用

buildState（）

都会返回新的不同对象。

我认为这里的问题是

wordToGuess

部分。 当你第一次申报时

const DEFAULT_STATE = {
  disabledItems: [],
  wordToGuess: mots[Math.floor(Math.random() * mots.length)],
  mistakes: 0,
  lose: false,
  win: false,
}

执行部分

mots[Math.floor（Math.random（）*mots.length）]

并为

wordToGuess

赋值，该值在过程中变为常量

当你在做

 this.setState({
  ...DEFAULT_STATE,
  disabledItems: [],
  wordToGuess: mots[Math.floor(Math.random() * mots.length)],
})

您正在重新计算wordToGuess并重新分配它。我认为残疾人不应该有任何问题

所以这也应该起作用

this.setState({
  ...DEFAULT_STATE,
  wordToGuess: mots[Math.floor(Math.random() * mots.length)],
})

更新：

多亏了RoxyPoxxy，我做了一些更好的事情，而且效果很好：

const DEFAULT_STATE = {
  disabledItems: [],
  mistakes: 0,
  lose: false,
  win: false,
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...DEFAULT_STATE,
      wordToGuess: mots[Math.floor(Math.random() * mots.length)],
    }
  }

  //Arrow function for binding
  //Restart the game
  resetGame = () => {
    this.setState({
      ...DEFAULT_STATE,
      wordToGuess: mots[Math.floor(Math.random() * mots.length)],
    })
  }

问题是我在disabledItems中添加了一些内容。我是这样做的：

const disabledItems = this.state.disabledItems
disabledItems.push(letter)
this.setState({ disabledItems })

与其这样做，不如：

this.setState({
  disabledItems: [...this.state.disabledItems, letter],
})

---

我想重新设置我的状态，回到初始状态谢谢，这是我的想法，但我不能真正解释为什么和如何。此方法是否存在性能问题？我认为它没有性能问题，因为每次都需要在

resetGame

方法中生成新对象。或者将来您可以像这样将新键附加到此对象：

this.setState（{…buildState（），foo:1，bar:'foo'}）

OK，非常感谢！还有另一个（也是最后一个）问题：）！为什么我的对象保留引用？我正在使用：this.state={…DEFAULT_state}-这不是一个真正的克隆吗？它不应该链接到默认的_状态，我错了吗？这是因为spread操作符只做一个浅克隆。这意味着嵌套的非原语不会被克隆（也称为数组）。一般来说，您不需要深度克隆，而进行浅层克隆更有效，但在这种情况下，您确实需要重新创建这些嵌套对象的链接到默认状态，但它在bundle和resetGame方法中声明了一次grab it old objectHi！事实上，disabledItems和wordToGuess并没有重置，这就是我这样写的原因。看看这个例子，看看它是否与您的场景有什么不同。谢谢分享：）！