无法将对象保存至localStorage问题求助

核心问题 #

• 你虽然用了await fetch(...)，但内部嵌套了.then()回调，await只等待了fetch请求完成，并没有等待response.json()解析和setUserObj执行完毕，导致执行localStorage.setItem时，userObj还没被更新。
• React的setUserObj是异步操作，调用后userObj不会立刻变成新值，直接在后面存localStorage拿到的还是初始的null值。

修复方案 #

把嵌套的.then()换成await，让整个异步流程按顺序执行，并且直接用接口返回的data存入localStorage，不用依赖state的异步更新：

const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: user.email,
        password: user.password,
      }),
    };

    // 用await替代then嵌套，确保流程顺序执行
    const response = await fetch("http://localhost:5000/api/login", requestOptions);
    console.log(response);
    const data = await response.json();
    
    // 设置state
    setUserObj({
      user: data.user,
      token: data.token,
    });
    
    // 直接用接口返回的data存入localStorage，避免state异步延迟
    localStorage.setItem("auth-new", JSON.stringify({
      user: data.user,
      token: data.token,
    }));

    setUser({ email: "", password: "" });
    router.push("/");
};

为什么这样有效 #

• await response.json()替代.then()后，会确保拿到接口返回的完整数据后再执行后续操作，解决了异步嵌套导致的顺序混乱问题。
• 直接使用接口返回的data生成存储对象，绕过了React state异步更新的延迟，保证存入localStorage的是最新的用户数据。

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