React计数器状态更新异常：答题后未触发预期逻辑

核心问题拆解 #

你遇到的问题主要来自React setState的异步特性、闭包陷阱，以及状态更新逻辑的嵌套错误，下面逐个分析：

1. 嵌套调用setState导致逻辑混乱 #

你在setMyQuiz的更新回调里直接调用setQuestionCounter，这是不符合React最佳实践的写法。嵌套的状态更新会让状态的依赖关系和更新顺序变得不可预测，还容易触发不必要的重复渲染。

修复方式：把两个状态更新操作拆分，保持独立：

function userClickAnswer(e){
    console.log(`initial counter: ${questionCounter}`)
    // 先更新答题记录
    setMyQuiz(prevMyQuiz => {
        let newQuiz = prevMyQuiz.map(item => ({...item}))
        newQuiz[questionCounter].userSelection = e.target.innerHTML
        return newQuiz
    })
    // 再更新计数器
    setQuestionCounter(prevCounter => prevCounter + 1)
    console.log(`updated counter: ${questionCounter}`)
}

2. 条件判断用了闭包捕获的旧状态值 #

你原本在setQuestionCounter回调里写的if(questionCounter === 10)，这里的questionCounter是闭包捕获的更新前的旧值——每次点击时旧值最多是9，更新后才会到10，所以这个条件永远不会触发。

正确做法：用回调里的prevQuestionCounter或计算后的新值判断：

// 错误写法
if(questionCounter === 10)
// 正确写法（在setQuestionCounter回调内）
if(prevQuestionCounter + 1 === 10)

3. 打印myQuiz时拿的是旧状态 #

就算条件触发了，console.log(myQuiz)打印的也是更新前的旧数据，因为React的setState是异步批量更新的，当前函数执行时状态还未完成更新。

推荐做法：用useEffect监听计数器的变化，在状态稳定后再执行收尾逻辑：

useEffect(() => {
    if(questionCounter === 10){
        console.log(myQuiz)
        const totalCorrect = checkAnswers(myQuiz)
        setCorrectCounter(totalCorrect)
        setCurrentStage('result')
    }
}, [questionCounter, myQuiz])

4. 控制台显示counter不变的原因 #

你看到initial counter和updated counter值一致，是因为setQuestionCounter是异步操作，同步代码里无法立即拿到更新后的状态。如果要查看更新后的计数器，要么在setQuestionCounter的回调里打印，要么用useEffect监听：

// 方式1：在回调内打印
setQuestionCounter(prev => {
    const newCounter = prev +1
    console.log(`更新后的计数器：${newCounter}`)
    return newCounter
})

// 方式2：用useEffect监听
useEffect(() => {
    console.log(`当前计数器：${questionCounter}`)
}, [questionCounter])

优化后的完整逻辑示例 #

把状态更新和收尾逻辑拆分，用useEffect处理计数器达到10后的操作，代码更清晰且符合React规范：

let [myQuiz, setMyQuiz] = useState([{
    question: 'What is your favorite color',
    correct_answer: 'green',
    incorrect_answers: ['red','blue','white'],
    userSelection: '',
    allPossibleAnswers:['red','blue','white','green'],
    key: randomKey()
}])
let [questionCounter, setQuestionCounter] = useState(0)

// 监听计数器变化，完成收尾逻辑
useEffect(() => {
    if(questionCounter === 10){
        console.log(myQuiz)
        const totalCorrect = checkAnswers(myQuiz)
        setCorrectCounter(totalCorrect)
        setCurrentStage('result')
    }
}, [questionCounter, myQuiz])

function userClickAnswer(e){
    // 更新当前题目的用户选择
    setMyQuiz(prevMyQuiz => {
        const newQuiz = [...prevMyQuiz]
        newQuiz[questionCounter] = {
            ...newQuiz[questionCounter],
            userSelection: e.target.innerHTML
        }
        return newQuiz
    })
    // 更新计数器
    setQuestionCounter(prev => prev + 1)
}

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