Question

因此，用户可以通过表单添加事物，并将它们以状态存储在数组（行为）中。

单击“开始”时，将调用 handlePick 组件。之后，您会看到一个“ NEXT”按钮，该按钮会触发 handleTest 。

这个想法是，当您单击“ NEXT”时，应从Acts中删除selectedOption并将其放入playActs中，然后运行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

只要组件中有多个setStates，就优选使用功能setState。

功能性setState 主要有助于在较短的时间间隔内触发多个setStates时正确的状态更新，而常规setState确实会进行对帐并可能导致意外状态。

这是功能setState的示例代码。

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

请查看关于函数setState的this文章以明确了解

Answer 2

实际上问题出在splice函数上，它使数组发生变化并且setState期望新状态，而应该使用数组的filter或slice函数。

从react中的状态数组中删除项目

2 个答案: