>

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

  • 답변 # 1

    setState()  반드시 동기 작업은 아닙니다 :

    와이즈 비즈 와이즈 비즈  

    를 즉시 변경하지 않습니다  보류 상태 전환을 만듭니다. setState() 에 액세스  후미

         

    this.state 에 대한 호출의 동기 작동을 보장하지 않습니다  성능 향상을 위해 통화가 일괄 처리 될 수 있습니다.

    이런 이유로 this.state  여전히 이전 값을 유지할 수 있습니다 :

    setState
    
    

    <시간>

    대신상태 전환이 완료되면 호출되는 콜백 함수를 사용:

    this.state.questionNumber
    
    

  • 답변 # 2

    Sandwichz에 따르면 setState를 사용한 직후 상태에 액세스하면 실제 값을 보장 할 수 없습니다. 다음과 같이 할 수 있습니다 :

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

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

관련 자료

  • 이전 iphone - 한 번에 하나의 UITableViewCellAccessoryCheckmark 만 허용
  • 다음 action - Wordpress는 게시물에서 첫 번째 이미지의 추천 이미지를 설정했습니다