React中useState首次更新失效求助：登录时首次获取res data为空

核心原因 #

React的useState状态更新是异步批量处理的，你在handleSubmit里调用fetchData后立刻console.log(Bol)，此时状态还没完成更新，所以拿到的是初始的空对象。另外你的代码里还有两个容易忽略的错误：

• 条件判断里的res.statusText = "OK"是赋值操作，不是相等判断，应该用===
• 你先调用history("/grains")再执行setBol(res.data)，跳转后当前组件可能被卸载，导致状态更新被中断

修复步骤 #

1. 修正判断条件的赋值错误

把赋值操作改成全等判断，同时调整跳转和状态更新的顺序：

.then((res) => {
  if (res.statusText === "OK") { // 改为全等判断
    setBol(res.data); // 先更新状态
    history("/grains"); // 再执行页面跳转
  }
})

2. 首次提交时获取最新值的两种方式

方式一：直接使用接口返回的res.data

既然已经在回调里拿到了接口返回的数据，若需要在提交后立刻使用，直接用res.data即可，无需等待状态更新：

const handleSubmit = async (e) => {
  e.preventDefault();
  const loginData = await fetchData();
  if (loginData) {
    console.log(loginData); // 首次提交就能拿到最新数据
  }
};

// 修改fetchData，让它返回接口数据
const fetchData = async () => {
  const { email, password } = Input;
  if (!email || !password) {
    alert("credential can not be empty");
    return;
  }
  try {
    const res = await axios.post("/register/login", {
      email: String(email),
      password: String(password),
    });
    if (res.statusText === "OK") {
      setBol(res.data);
      history("/grains");
      return res.data; // 返回接口数据
    }
  } catch (error) {
    alert(error.response.data.error);
  }
};

方式二：用useEffect监听状态变化

如果必须依赖Bol状态做后续操作，通过useEffect监听状态更新，状态变化后再执行对应逻辑：

import { useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  if (Object.keys(Bol).length > 0) {
    console.log(Bol); // 状态更新后触发，首次提交就能拿到值
    // 这里可以添加依赖Bol的其他操作
  }
}, [Bol]); // 依赖项设为Bol，状态变化时自动执行

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