React技术问题：useEffect日志顺序异常及isLoading状态失效排查

你的代码核心问题是没有等待异步请求getPlayableGames()完成就执行了后续的状态更新和日志打印，导致DONE提前输出，isLoading状态无法正确反映请求的加载状态。

问题根源 #

1. 你在async函数里使用了.then()处理Promise，但没有用await等待这个Promise完成，代码会直接跳过异步操作，继续执行setIsLoading(false)和finally块里的代码。
2. finally块会在try/catch执行完毕后立即触发，而不是等待getPlayableGames()的Promise resolve，所以请求还在进行时，就已经打印了DONE并把isLoading设为false。

修改后的代码 #

const [isLoading, setIsLoading] = useState(false)
const [gameList, setGameList] = useState([]) // 假设你已声明该状态

useEffect(() => {
  async function fetchGames() {
    try {
      setIsLoading(true)
      console.log('FETCHING');
      // 用await等待请求完成
      const gameList = await getPlayableGames()
      setGameList(gameList)
    } catch (error) {
      // 可在此添加错误处理逻辑，比如打印错误信息
      console.error('获取游戏列表失败:', error)
    } finally {
      setIsLoading(false)
      console.log('DONE');
    }
  }
  fetchGames()
}, [])

关键修改点 #

• 把.then()替换为await，让async函数暂停执行，直到getPlayableGames()的Promise完成后再继续后续逻辑。
• 移除了try块里多余的setIsLoading(() => false)，由finally块统一在请求完成（无论成功或失败）后设置isLoading为false，保证状态更新的一致性。
• 补充了错误捕获的基础处理，方便后续排查问题（可根据需求调整）。

修改后，FETCHING会在请求开始时打印，DONE会在请求完全结束后打印，isLoading状态也能准确反映加载过程。

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