ReactJS onClick state change one step behind

Question

Я создаю очень примитивное приложение для викторины с 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> 
    ) 
    } 
} 

Answer 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) 
}) 

Answer 2

Как говорит Сэндвич, если вы получаете доступ к правильному состоянию на корме используя 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) 
    } 
}