React中如何使异步函数同步执行？解决状态未更新调用API问题

错误原因 #

1. setState不支持await：React中useState返回的更新函数（setUser）是异步操作，但它不会返回Promise对象，所以await setUser(userData)完全起不到等待状态更新的作用，代码会直接往下执行。
2. 闭包导致旧值捕获：即使setUser触发了状态更新，当前runSynchronously函数作用域里的user变量还是更新前的旧值（null）——因为函数创建时已经捕获了当时的user引用，不会随着组件状态更新而同步变化。

解决方法 #

方法1：直接传递已知的userData（最简单高效） #

既然login函数已经拿到了userData，直接把这个值传给getBookShelf即可，不需要依赖更新后的user状态：

const login = (userData) => {
  const runSynchronously = async () => {
    console.time("runSynchronously")
    try {
      setUser(userData); // 直接更新状态，无需await
      await getBookShelf(userData); // 传入已有的userData
    } catch (error) {
      console.log(error)
    }
    console.timeEnd("runSynchronously") // 修正原代码中的名字笔误
  }

  if (userData) {
    runSynchronously();
  }
  localStorage.setItem('sessionToken', 'your-session-token');
};

方法2：用useEffect监听状态变化（符合React状态驱动逻辑） #

通过useEffect监听user状态，当user从null变为有效数据时，自动调用API获取书架数据：

import { useState, useEffect } from 'react'; // 需引入useEffect

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [userBookShelf, setUserBookShelf]= useState(null);
  
  // 保留原getBookShelf函数不变
  async function getBookShelf(userData) {
    console.log("user", userData);
    const response = await fetch(`http://localhost:5050/bookshelf/myBookShelf`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      }, 
      body: JSON.stringify({user:userData}),
    });

    if (!response.ok) {
      const message = `An error occurred: ${response.statusText}`;
      window.alert(message);
      return;
    }
    const bookShelf = await response.json();
    console.log("setting bookshelf", bookShelf);
    setUserBookShelf(bookShelf);
  }

  // 监听user状态变化，自动触发API调用
  useEffect(() => {
    if (user) { // 仅当user存在时执行
      getBookShelf(user);
    }
  }, [user]); // 依赖项为user，状态更新时触发

  const login = (userData) => {
    if (userData) {
      setUser(userData); // 只需更新状态，后续逻辑交给useEffect处理
    }
    localStorage.setItem('sessionToken', 'your-session-token');
  };

  // 补充返回children（原代码缺失部分）
  return <>{children}</>;
};

额外注意点 #

原代码中console.timeEnd("runParallelAll")是名字错误，需和console.time("runSynchronously")保持一致，否则计时功能会失效。

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