Reactjs 想在测验结束时更改react js中的状态并显示信息吗

这是我的函数，当到达测验结束时，它会改变状态

finishQuiz = () => {
    if (this.state.currentQuestion === Quizdata.length - 1) {
      this.setState({
        isEnd: true
      });
    }
  };

这是我在渲染中使用isEnd，我在最底部的finish按钮上调用了这个函数，所以当我单击finish按钮时，它应该使isEnd为true，并显示下面的分数。但是当到达终点时不会发生任何事情，但逻辑看起来是正确的

render() {
    const { userAns, options, currentQuest, isEnd } = this.state;
    if (isEnd) {
      return (
        <div>
          <h3 className="SummaryResults">
            Quiz Finished, You scored {this.state.scores}/{Quizdata.length - 1}!
          </h3>
        </div>
      );
    } else {
      return (
        <div className="quizForm">
          <br></br>
          {/*  <Welcome stateQuiz1={this.changeToquiz2} />*/}

          <div>
            <ProgressBar animated now={this.state.currentQuest * 10} />
          </div>
          {this.state.questions}
          <br></br>
          <p style={{ textAlign: "center" }}>Q{this.state.currentQuest}</p>
          {this.state.pictures}
          <br></br>

          {options.map(option => (
            <Button
              size="lg"
              block
              key={option.id}
              className={`ui floating message options
            ${userAns === option ? "selected" : null}
           `}
              onClick={() => this.checkAns(option)}
            >
              {option}
            </Button>
          ))}

          <br></br>
          <Button onClick={() => this.checkAns()}>
            CHECK <FaHorse />
          </Button>
          {currentQuest < Quizdata.length - 1 && (
            <Button
              disabled={this.state.disabled}
              onClick={() => {
                this.nextQuestion();
                this.pushtoDB();
                this.finishQuiz();
              }}
            >
              NEXT <FaArrowRight />
            </Button>
          )}
          <br></br>

          {currentQuest === Quizdata.length - 1 && (
            <Button
              onClick={() => {
                this.finishQuiz();
                this.pushtoDB2();

              }}
            >
              Finish
            </Button>
          )}
        </div>
      );
    }
  }
}

render（）{
const{userAns，options，currentQuest，isEnd}=this.state；
如果（i结束）{
返回(
测验完成后，您获得了{this.state.scores}/{Quizdata.length-1}！
);
}否则{
返回(



{/*  */}
{this.state.questions}



Q{this.state.currentQuest}
{this.state.pictures}



{options.map（option=>(
this.checkAns（选项）}
>
{option}
))}



this.checkAns（）}>
检查
{currentQuest
下一个
)}



{currentQuest===Quizdata.length-1&&(
{
this.finishquick（）；
这个。pushtoDB2（）；
}}
>
完成
)}
);
}
}
}

---

任何帮助，谢谢

编写此代码的另一种方法是您可以这样尝试。您还可以检查isEnd状态，您可以控制台它是否正在更改

render() {
    const { userAns, options, currentQuest, isEnd } = this.state;
      return (

        {isEnd && <div>
          <h3 className="SummaryResults">
            Quiz Finished, You scored {this.state.scores}/{Quizdata.length - 1}!
          </h3>
        </div>}

        {!isEnd && <div className="quizForm">
          <br></br>
          {/*  <Welcome stateQuiz1={this.changeToquiz2} />*/}

          <div>
            <ProgressBar animated now={this.state.currentQuest * 10} />
          </div>
          {this.state.questions}
          <br></br>
          <p style={{ textAlign: "center" }}>Q{this.state.currentQuest}</p>
          {this.state.pictures}
          <br></br>

          {options.map(option => (
            <Button
              size="lg"
              block
              key={option.id}
              className={`ui floating message options
            ${userAns === option ? "selected" : null}
           `}
              onClick={() => this.checkAns(option)}
            >
              {option}
            </Button>
          ))}

          <br></br>
          <Button onClick={() => this.checkAns()}>
            CHECK <FaHorse />
          </Button>
          {currentQuest < Quizdata.length - 1 && (
            <Button
              disabled={this.state.disabled}
              onClick={() => {
                this.nextQuestion();
                this.pushtoDB();
                this.finishQuiz();
              }}
            >
              NEXT <FaArrowRight />
            </Button>
          )}
          <br></br>

          {currentQuest === Quizdata.length - 1 && (
            <Button
              onClick={() => {
                this.finishQuiz();
                this.pushtoDB2();

              }}
            >
              Finish
            </Button>
          )}
        </div>}
      );
    }

render（）{
const{userAns，options，currentQuest，isEnd}=this.state；
返回(
{isEnd&&
测验完成后，您获得了{this.state.scores}/{Quizdata.length-1}！
}
{！我发现&&



{/*  */}
{this.state.questions}



Q{this.state.currentQuest}
{this.state.pictures}



{options.map（option=>(
this.checkAns（选项）}
>
{option}
))}



this.checkAns（）}>
检查
{currentQuest
下一个
)}



{currentQuest===Quizdata.length-1&&(
{
this.finishquick（）；
这个。pushtoDB2（）；
}}
>
完成
)}
}
);
}

if（this.state.currentQuestion==Quizdata.length-1）删除

if会发生什么{

？在finishQuiz@JuniusL.但是我只想在测验结束时使状态为真，所以我需要的不是

this.state.currentQuest

而不是

this.state.currentQuest

？，因为currentQuestion可能未定义，如果statement@crrmacarse你是对的，那是我的错感谢它的工作，我使用了错误的变量

{isEnd&&

到

{isEnd&&