React状态更新顺序问题：setCurrentUser后currentUser仍为null

React的状态更新是异步批量处理的，调用setCurrentUser之后，currentUser不会立刻同步更新。你当下执行的console.log拿到的还是更新前的旧值（也就是null），这不是代码顺序的问题，是React状态更新的机制导致的。

方案1：直接使用已获取的user变量 #

既然你已经通过signInAuthUserWithEmailAndPassword拿到了user，完全可以直接用这个变量来做判断和打印，不需要等状态更新：

const handleSubmit = async (event) => {
    event.preventDefault()

    try {
        const user = await signInAuthUserWithEmailAndPassword(
            email,
            password
        );
        await setCurrentUser(user)
        // 直接用user而非currentUser
        console.log(user)
        // 用user判断设置toggleSuccess
        user ? setToggleSuccess(true) : setToggleSuccess(false)
        resetFormFields();
        console.log(user)
    } catch (error) {
        // 补充错误处理逻辑
    }
}

方案2：用useEffect监听状态变化 #

如果后续逻辑必须依赖更新后的currentUser状态，可以通过useEffect监听currentUser的变化，当状态真正更新时自动触发对应操作：

// 在组件内部添加useEffect监听
useEffect(() => {
    // currentUser更新时执行
    console.log(currentUser)
    currentUser ? setToggleSuccess(true) : setToggleSuccess(false)
}, [currentUser]) // 依赖项设为currentUser，仅当它变化时触发

// 修改handleSubmit，只负责登录和设置状态
const handleSubmit = async (event) => {
    event.preventDefault()

    try {
        const user = await signInAuthUserWithEmailAndPassword(
            email,
            password
        );
        await setCurrentUser(user)
        resetFormFields();
    } catch (error) {
        // 补充错误处理逻辑
    }
}

注意点 #

如果setCurrentUser是React原生useState生成的setter函数，它不返回Promise，所以await setCurrentUser(user)是无效的，可以直接去掉await，写成setCurrentUser(user)。

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