Next.js异步提交函数中如何获取更新后的状态值？

在注册按钮的submitHandler函数中，调用setMoodleError、setEmailError等状态更新方法后，紧接着的if判断仍然拿到旧的状态值，导致验证不通过时提交逻辑依然执行。这是因为React的useState更新是异步批量执行的，状态不会在调用setter后立刻改变，所以后续判断无法获取最新状态。

解决方案：直接使用验证结果变量（推荐） #

既然已经通过正则表达式完成了验证，我们可以把验证结果先存在变量里，既用来更新错误状态，又用来做提交判断，完全不需要依赖状态的值：

const submitHandler = async (e) => {
    e.preventDefault();

    // 获取输入值
    const enteredUserName = userNameRef.current.value;
    const enteredMoodleId = moodleIdRef.current.value;
    const enteredEmail = emailRef.current.value;
    const enteredPassword = passwordRef.current.value;

    // 先执行验证，保存结果到变量
    const isMoodleIdValid = regexForMoodleId.test(enteredMoodleId);
    const isEmailValid = regexForEmailId.test(enteredEmail);
    const isPasswordValid = regexForPassword.test(enteredPassword);

    // 更新错误状态（控制错误提示显示）
    setMoodleError(!isMoodleIdValid);
    setEmailError(!isEmailValid);
    setPasswordError(!isPasswordValid);

    // 用验证变量判断，而非状态值
    if (isMoodleIdValid && isEmailValid && isPasswordValid && checkboxState) {
        setSpinner(true);
        try {
            const response = await addUser(
                enteredUserName,
                enteredMoodleId,
                enteredEmail,
                enteredPassword
            );
            setSpinner(false);
            
            if (response.status === 201) {
                await router.push("/signin");
            } else if (response.status === 302) {
                setOpen(prevState => ({
                    ...prevState,
                    open: true,
                    message: "用户已存在！请登录继续。"
                }));
            } else {
                setOpen(prevState => ({
                    ...prevState,
                    open: true,
                    message: "发生错误，请重试。"
                }));
            }
        } catch (error) {
            setSpinner(false);
            setOpen(prevState => ({
                ...prevState,
                open: true,
                message: "请求失败，请检查网络后重试。"
            }));
        }
    }
};

为什么这个方法有效？ #

我们直接使用了正则验证后的布尔值（isMoodleIdValid等），这些值是同步计算出来的，不存在异步延迟问题。状态更新只用来控制页面上的错误提示显示，而提交逻辑的判断完全基于同步获取的验证结果，从根源上避免了useState异步更新带来的问题。

备选方案：使用useEffect监听状态（不推荐用于提交场景） #

如果一定要等待状态更新后再执行逻辑，可以用useEffect监听三个错误状态的变化，但这种方法会在每次状态改变时触发，容易导致不必要的执行，不适合提交按钮的场景，仅作参考：

useEffect(() => {
    // 当所有错误状态都为false且checkbox选中时，执行提交逻辑
    if (!moodleError && !emailError && !passwordError && checkboxState && shouldSubmit) {
        // 这里写提交逻辑
    }
}, [moodleError, emailError, passwordError, checkboxState, shouldSubmit]);

// 在submitHandler中设置shouldSubmit为true，触发useEffect
const submitHandler = (e) => {
    e.preventDefault();
    // ... 验证并更新错误状态
    setShouldSubmit(true);
};

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