Question

我有一个关于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 })
  }

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

相反，这是当前正在运行的代码：

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)],
    })
  }

在这里，一切都很好。

这是参考问题吗？请帮我理解:)！非常感谢！

Answer 1

之所以发生这种情况是因为您声明了一次DEFAULT_STATE对象，并且所有项目都存储在内存中，并且您的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()都会返回新的不同对象。

Answer 2

我认为这里的问题是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并重新分配它。我不认为disabledItems应该有任何问题。

所以这也应该有用

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

Answer 3

更新：

由于roxxypoxxy，我做了更好的事情并且有效：

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],
})

React - 默认状态

3 个答案: