React中setState更新延迟问题：答题应用按钮状态无法即时更新

问题原因 #

React中useState的状态更新是异步批量处理的，调用setClickedOption这类setter函数后，对应的state不会立刻同步更新。如果在调用setter后直接读取state，拿到的还是更新前的旧值。另外你的代码还存在两个逻辑漏洞：

• checkAnswer函数未被触发，点击选项后没有执行答案验证
• 切换题目时未重置clickedOption，会导致下一题保留上一题的选中状态

解决方案 #

1. 利用临时变量替代直接读取更新后的state
   如果需要在设置状态后立刻执行验证逻辑，直接使用设置状态时的临时变量，而非依赖异步更新的state：

   const handleClick = (i) => {
     const selectedOption = i + 1;
     setClickedOption(selectedOption);
     // 直接用临时变量判断，无需等待state更新
     if (selectedOption === QuestionsData[currentQuestion].answer) {
       alert("这是正确答案");
     } else {
       alert("这是错误答案");
     }
   }
   

2. 用useEffect监听状态变化
   如果需要在state更新完成后执行操作，使用useEffect钩子监听目标state的变化：

   import React, { useState, useEffect } from "react";
   // ... 其他导入代码
   
   export default function Question() {
     // ... 已有state声明
     
     useEffect(() => {
       // 初始状态为0，仅当选中选项后才验证
       if (clickedOption !== 0) {
         checkAnswer();
       }
     }, [clickedOption, currentQuestion]); // 依赖项变化时触发
   
     const handleClick = (i) => {
       setClickedOption(i + 1);
     }
   
     // ... 其他函数
   }
   

3. 切换题目时重置选中状态
   在changeQuestion中添加重置clickedOption的逻辑，避免状态污染：

   const changeQuestion = () => {
     if (currentQuestion < QuestionsData.length - 1) {
       // 使用函数式更新避免闭包问题
       setCurrentQuestion(prev => prev + 1);
       setClickedOption(0);
     }
   };
   

4. 函数式更新避免闭包陷阱
   当更新状态依赖于之前的state值时，推荐使用函数式更新，确保拿到最新的state：

   // 替代 setCurrentQuestion(currentQuestion + 1)
   setCurrentQuestion(prevCurrent => prevCurrent + 1);
   

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