ReactJS onClick状态改变落后一步

Question

我正在使用ReactJS构建一个非常原始的测验应用程序，但无法更新Questions组件的状态。它的行为是，questions尽管在以下方面this.state.questionNumber始终落后一步，但它仍为DOM提供了正确的数组索引handleContinue()：

import React from "react"

export default class Questions extends React.Component {
  constructor() {
    super()
    this.state = {
      questionNumber: 1
    }
  }

  //when Continue button is clicked
  handleContinue() {
    if (this.state.questionNumber > 3) {
      this.props.unMount()
    } else {
      this.setState({
        questionNumber: this.state.questionNumber + 1
      })
      this.props.changeHeader("Question " + this.state.questionNumber)
    }
  }

  render() {
    const questions = ["blargh?", "blah blah blah?", "how many dogs?"]
    return (
      <div class="container-fluid text-center">
        <h1>{questions[this.state.questionNumber - 1]}</h1>
        <button type="button" class="btn btn-primary" onClick={this.handleContinue.bind(this)}>Continue</button>
      </div>
    )
  }
}

Answer 1

setState()是不必是同步操作：

setState()不会立即变异，this.state但会创建待处理的状态转换。this.state向后进入

无法保证对呼叫的同步操作，setState并且可以为提高性能而对呼叫进行批量处理。

因此，this.state.questionNumber此处可能仍保留先前的值：

this.props.changeHeader("Question " + this.state.questionNumber)

相反，请 使用 状态转换完成后调用的回调函数：

this.setState({
    questionNumber: this.state.questionNumber + 1
}, () => {
    this.props.changeHeader("Question " + this.state.questionNumber)
})