javascript - 使用 prevState 实现计数器功能

Question

不确定我哪里出错了，但我有两个按钮可以充当计数器

this.state= { currentQuestionId: 1 }

根据currentQuestionId的状态，它渲染特定的div

我有这个功能

checkButton = button => {
    if (button.id === 3) {
      this.setState(state => ({
        userAnswers: state.userAnswers.concat([button]),
        currentQuestionId: (state.currentQuestionId = 5),
      }))
      console.log('questionState', this.state.currentQuestionId)
    } else {
      this.selectAnswer(button)
    }

    console.log('button pressed', button.id)
  }

如果按下特定按钮，则会设置currentQuestionId = 5，

我还有另一个函数可以减少 currentQuestionId

previousQuestion = () => {
    this.setState(prevState => ({ currentQuestionId: prevState.currentQuestionId - 1 }))
  }

基本上，一旦我的 CheckButton 函数 触发，它就会设置我的 currentQuestionId = 5，并且当 previousQuestion 触发时，我希望它返回currentQuestionId 在设置为 5 之前的状态

我错过了什么？

Answer 1

我认为您将 prevState 理解为状态更改为另一个值之前所处的值。例如，您期望如果 currentQuestionId = 3，那么我们设置 currentQuestionId = 5，即 currentQuestionId 的 prevState code> 等于 3。这不是 prevState 的用途。

prevState 允许您对值执行原子更新以确保正确性:

this.setState(prevState => ({ currentQuestionId: prevState.currentQuestionId - 1 }))

而使用 this.state 是异步执行的:

this.setState(() => ({ currentQuestionId: this.state.currentQuestionId - 1 }))

但是，这些都会将 currentQuestionId 减少 1。有关 prevState 的使用及其工作原理的更多信息 here .

要回答您的问题，您要做的就是向您的类添加另一个名为 previousQuestionId 的状态变量，并将其设置为 currentQuestionId，然后再更新 currentQuestionId 更改为新值。这样您就可以跟踪以前的值并使用以下方法设置它:

previousQuestion = () => {
    this.setState({ currentQuestionId: this.state.previousQuestionId }))
  }

编辑:跟踪前面的问题的更好方法是使用堆栈。您可以在选择新问题 ID 时向其中推送新值，并在运行 previousQuestion 时从中弹出值。