ReactJS onClick 状态变化落后一步

Posted 2023-02-22

【中文标题】ReactJS onClick 状态变化落后一步

【英文标题】：ReactJS onClick state change one step behind

【发布时间】：2017-04-23 22:17:25

【问题描述】：

我正在使用 ReactJS 构建一个非常原始的测验应用程序，但我无法更新我的 Questions 组件的状态。它的行为是将questions 数组的正确索引呈现给DOM，尽管this.state.questionNumber 在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>
    )
  

【问题讨论】：

我不确定我是否理解您的问题。我确实看到您在排队更新后立即访问this.state.questionNumber。在 React 中设置状态是一个异步操作，因此不能保证它会在下一次函数调用时及时更新。来自官方文档： setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

在这种情况下有什么好的选择？

【参考方案1】：

setState() 是not necessarily a synchronous operation：

setState() 不会立即改变this.state，而是创建一个挂起的状态转换。访问this.state aft

无法保证对setState 的调用会同步操作，并且可能会批处理调用以提高性能。

出于这个原因，this.state.questionNumber 可能仍会保留以前的值：

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

---

改为使用状态转换完成后调用的callback function：

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

【讨论】：

我很喜欢这个回调函数方案

回调函数是天赐之物

【参考方案2】：

正如 Sandwichz 所说，如果您在使用 setState 后立即访问状态，则无法保证实际值。你可以这样做：

handleContinue() 
  if (this.state.questionNumber > 3) 
    this.props.unMount()
   else 
    const newQuestionNumber = this.state.questionNumber + 1
    this.setState(
      questionNumber: newQuestionNumber
    )
    this.props.changeHeader("Question " + newQuestionNumber)