React State无法获取最新值：Otp输入6位仅打印5位的解决方法

问题根源 #

React的useState更新是异步批量执行的，当MuiOtpInput触发onComplete时，setOtp还没来得及把第6位的更新同步到otp状态里，所以handleSubmit打印的是更新前的旧值（5位）。

解决办法 #

方案1：直接使用onComplete的回调参数

大部分OTP输入组件的onComplete会直接返回完整的6位验证码，你可以直接拿这个值用，不用依赖state：

function OtpForm() {
    const [otp, setOtp] = useState('');

    function handleSubmit(completedOtp) {
        // 直接用传入的完整OTP值
        console.log(completedOtp);
        // 需要的话同步到state
        setOtp(completedOtp);
    };

    return (
        <form>
            <MuiOtpInput
                value={otp}
                onChange={(val) => { setOtp(val); }}
                validateChar={(val) => !isNaN(val)}
                // 接收onComplete返回的完整OTP
                onComplete={(completedOtp) => handleSubmit(completedOtp)}
                length={6}
            />
        </form>
    );
}

方案2：用useEffect监听OTP长度变化

如果组件的onComplete不返回值，那就监听otp状态，当长度达到6时自动执行提交逻辑：

import { useEffect, useState } from 'react';

function OtpForm() {
    const [otp, setOtp] = useState('');

    function handleSubmit() {
        console.log(otp);
    };

    // 监听otp变化，长度为6时触发提交
    useEffect(() => {
        if (otp.length === 6) {
            handleSubmit();
        }
    }, [otp]);

    return (
        <form>
            <MuiOtpInput
                value={otp}
                onChange={(val) => { setOtp(val); }}
                validateChar={(val) => !isNaN(val)}
                length={6}
            />
        </form>
    );
}

优先用方案1，逻辑更直接高效，能避开state异步更新的问题。

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