应用程序中的计数器未按预期 function

Question

 if(this.state.current=== this.state.dataSet.length-1){
    if(this.state.choice.correct===2) { 
      this.setState({IsPassed:true})
    }
    else if(this.state.choice.incorrect===2){ 
      this.setState({IsFailed:true})
  }}else{
    this.setState({current:this.state.current+1})
} 

 import React from 'react' function IsPassed() { return ( <div> <h2 className="IsPassed">You are Passed;</h2> </div> ) } export default IsPassed;

 import React from 'react' function IsFailed() { return ( <div> <h2 className="IsFailed">You are Failed</h2> </div> ) } export default IsFailed;

 handleClick(choice){ if(choice===this.state.dataSet[this.state.current].correct){ this.setState({correct:this.state.correct+1}) } else{ this.setState({incorrect:this.state.incorrect+1}) } /*this.setState({isFinished:true})*/ if(this.state.current=== this.state.dataSet.length-1){ if(this.state.correct===2) { this.setState({IsPassed:true}) } else if(this.state.incorrect===2){ this.setState({IsFailed:true}) } } else{ this.setState({current:this.state.current+1}) } }

total 3 questions but it displaying 4 entries containing correct and incorrect Whenever i am selecting the correct option first and then incorrect,so when the third time when i select the correct option, it counts initially from 0 and displays the message of you are passed

Answer 1

You can call this inside componentDidUpdate() function to see if the test is finished and the user has passed or failed:

if(this.state.current=== this.state.dataSet.length-1){
        if(this.state.correct===2) { 
          this.setState({IsPassed:true})
        }
        else if(this.state.incorrect===2){ 
          this.setState({IsFailed:true})
        }
    }
}

And in the handleClick:

    if(choice===this.state.dataSet[this.state.current].correct){
          this.setState({
           correct:this.state.correct+1,
           current: this.state.current+1
          })
        }
        else{
          this.setState({
           incorrect:this.state.incorrect+1, 
           current:this.state.current+1
           })
        }