Реакция - состояние по умолчанию

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

Я думаю, что проблема здесь в части 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 2

Обновление:

Я сделал что-то лучше благодаря 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],
})

Answer 3

Это произошло потому, что вы объявляете свой объект 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() возвращает новый новый объект.