React中使用useState无法设置状态值的问题咨询

问题场景 #

提交表单时，console.log(user.user.uid)能正常输出用户ID，但调用setUserId(user.user.uid)后，紧接着调用userInfo函数时传入的userId却是null，相关代码如下：

const handleSubmit = async (e, email, password) => {
  e.preventDefault();
  try {
    const user = await createUserWithEmailAndPassword(auth, email, password);
    console.log(user.user.uid);
    await setUserId(user.user.uid);
  } catch (e) {
    console.log(e);
  }
  await userInfo(email, password, userId);
};

核心原因 #

React的useState状态更新是异步且批量处理的，调用setUserId后，userId不会立刻更新为新值。当前函数执行上下文里的userId还是初始的null，因为状态更新要等到下一次组件渲染才会生效。你看到的console.log(user.user.uid)能输出，是因为它直接读取的是createUserWithEmailAndPassword返回的同步变量，和state无关。

解决方案 #

方案1：直接使用获取到的uid（推荐）

既然已经拿到了user.user.uid，没必要通过state中转，直接把它传给userInfo即可：

const handleSubmit = async (e, email, password) => {
  e.preventDefault();
  try {
    const user = await createUserWithEmailAndPassword(auth, email, password);
    console.log(user.user.uid);
    setUserId(user.user.uid); // 保留state更新逻辑（如果后续需要用到这个state）
    await userInfo(email, password, user.user.uid); // 直接传uid
  } catch (e) {
    console.log(e);
  }
};

方案2：监听state变化触发函数

如果业务逻辑必须依赖userId的state值，可以用useEffect监听userId的变化，当它不为null时调用userInfo：

import { useEffect } from 'react';

// ...

const handleSubmit = async (e, email, password) => {
  e.preventDefault();
  try {
    const user = await createUserWithEmailAndPassword(auth, email, password);
    console.log(user.user.uid);
    setUserId(user.user.uid);
    // 这里不再直接调用userInfo
  } catch (e) {
    console.log(e);
  }
};

useEffect(() => {
  if (userId) {
    // 注意：如果email和password是组件状态，需要加入依赖数组
    userInfo(email, password, userId);
  }
}, [userId, email, password]);

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