Удалить элемент из массива состояний в реакции

Question

Таким образом, пользователь может добавлять вещи через форму, и они сохраняются в состоянии в массиве (Acts).

Компонент handlePick вызывается при нажатии кнопки «Пуск». , После этого вы видите кнопку «NEXT», которая запускает handleTest .

. Идея состоит в том, что когда вы нажимаете «NEXT», он должен удалить selectedOption из Acts и поместить его в playsActs, а затем запустить handlePick, чтобы получить следующий.

Что происходит, хотя, то, что иногда слово появляется дважды (и также регистрируется дважды). Похоже, что это не удаляется правильно.

state = {
    Acts: [],
    playedActs: [],
    selectedOption: undefined,
    gameOn: false
  }

}
  handleClearSelectedOption = () => {
    this.setState(() => ({ selectedOption: undefined }))
  }

handlePick = () => {
    const randomNum = Math.floor(Math.random() * this.state.Acts.length)
    const option = this.state.Acts[randomNum]
    this.setState(() => ({
      selectedOption: option,
      gameOn: true
    }))
  }

  handleTest = () => {
    const array = [...this.state.Acts]
    const index = array.indexOf(this.state.selectedOption)
    if (index !== -1) {
      array.splice(index, 1)
      this.setState({ Acts: array })
    }
    this.handleClearSelectedOption()
    console.log('hello', this.state.selectedOption)
    this.handlePick()
  }

Answer 1

На самом деле проблема в функции splice, она мутирует массив и setState ожидает новое состояние, вместо этого вы должны использовать функции фильтра или слайса массива.

Answer 2

Всякий раз, когда в вашем компоненте несколько setStates, предпочтительно использовать функционал setState.

Функциональный setState в основном полезно ожидать корректного обновления состояния, когда несколько setStates запускается через короткий промежуток времени, когда, как обычно, setState выполняет сверку и может привести к неожиданному состоянию.

Вот пример кода функции setState.

this.setState(prevState => ({
   count: prevState.count + 1,
}))

Пожалуйста, отметьте эта статья о Functional setState, чтобы получить ясное понимание