React状态变量设置异常导致if条件判断错误求助

核心问题 #

React的useState状态更新是异步批量处理的——在同一个函数调用里，你获取到的totqns、totmarks、flag1都是当前渲染周期的旧值，不会因为调用了setTotqns这类方法就立刻更新。这就是你console.log拿到旧值、判断逻辑失效的根本原因。

解决思路 #

先手动计算出更新后的总题数和总分，用临时变量存起来，后续所有判断逻辑都基于这个确定的新值，而非依赖还未更新的状态变量。

修改后的代码 #

const [assessCourseList, setAssessCourseList] = useState([]);
const [flag1, setFlag1] = useState(false)
const [totqns, setTotqns] = useState(0.0);
const [totmarks, setTotmarks] = useState(0.0);


function createAssessCourse1(e) {
    e.preventDefault();

    // 先计算本次要新增的题数和分数，以及更新后的总数值
    const addQns = Number(assessCourse.AC_CO_NoOfQns);
    const addMarks = Number(assessCourse.AC_CO_TotMarks);
    const newTotQns = totqns + addQns;
    const newTotMarks = totmarks + addMarks;
    
    // 直接用计算好的新值判断是否触发flag
    const shouldTriggerFlag = newTotQns >= Number(assessTotQns) || newTotMarks >= Number(assessTotMarks);

    // 更新状态变量
    setTotqns(newTotQns);
    setTotmarks(newTotMarks);
    setFlag1(shouldTriggerFlag);

    // 根据判断结果决定是否添加到列表
    if (!shouldTriggerFlag) {
        setAssessCourseList(prev => [...prev, assessCourse]);
    }
}

额外补充 #

如果你的场景存在快速重复触发（比如连续点击按钮）的情况，为了确保每次更新都基于最新状态，可以改用函数式更新：

// 替换状态更新部分
setTotqns(prev => prev + addQns);
setTotmarks(prev => prev + addMarks);

这种方式会自动传入当前最新的状态值进行计算，避免并发更新导致的偏差。

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