React测验应用出现Too many re-renders错误的解决求助

错误原因 #

你遇到的"Too many re-renders"错误，核心问题出在按钮的onClick绑定上：

<button onClick={handleCurrentquestion(item.iscorrect)} key={index}>{item.option}</button>

这里你直接调用了handleCurrentquestion函数，而非传递函数引用给onClick。组件每次渲染时都会立即执行这个函数，函数内部的setScore和setCurrentquestion会触发组件重新渲染，进而再次执行该函数，形成无限循环。

修复方案 #

1. 修正点击事件绑定方式

把onClick改成箭头函数，让它仅在按钮被点击时才执行handleCurrentquestion：

<button onClick={() => handleCurrentquestion(item.iscorrect)} key={index}>{item.option}</button>

2. 优化状态更新逻辑（推荐）

由于setScore依赖之前的score状态值，使用函数式更新可以避免闭包问题，确保拿到最新的状态：

const handleCurrentquestion=(iscorrect)=>{
    if(iscorrect){
        setScore(prevScore => prevScore + 1);
    }
    const nextquestion=currentquestion+1;
    if(nextquestion < QuestionsResponce.length){
        setCurrentquestion(nextquestion)
    }
}

完整修复后的代码 #

import React, { useState } from 'react'
import {QuestionsResponce} from "./constants/utils";

const Quizz = () => {
    const[currentquestion, setCurrentquestion]=useState(0);
    const[score,setScore]=useState(0);

    const handleCurrentquestion=(iscorrect)=>{
        if(iscorrect){
            setScore(prevScore => prevScore + 1);
        }
        const nextquestion=currentquestion+1;
        if(nextquestion < QuestionsResponce.length){
            setCurrentquestion(nextquestion)
        }
    }

  return (
    <div className="quiz-container">
        <h1>Question{currentquestion+1}/{QuestionsResponce.length}</h1>
        <h1>{QuestionsResponce[currentquestion].Question}</h1>
       <div className="option-section">
      {QuestionsResponce[currentquestion].Options.map((item,index)=>
       
       <button onClick={() => handleCurrentquestion(item.iscorrect)} key={index}>{item.option}</button>
      )}
    </div>
     {score}
    </div>
  )
}

export default Quizz

额外说明 #

你之前尝试用useEffect没解决问题，是因为错误根源不在状态更新时机，而是事件绑定方式错误导致函数被频繁触发执行。修复事件绑定后，无限循环问题就会消失。

内容的提问来源于stack exchange，提问作者we learn