ES6 async函数用法：React useEffect中async-await语法报错如何解决

报错原因 #

你收到的Invalid left-hand side in assignment expression语法错误，是因为await关键字后只能跟随返回Promise的异步表达式/函数调用，你写的await checkUserLogin=()=>{}是将函数赋值给变量的操作，不属于合法的await接收对象。

同时你的原始代码还存在以下问题：

• 定义了checkLogin异步函数但没有实际调用，逻辑不会执行
• 没有给useEffect添加空依赖数组，会导致每次组件更新都重复执行钩子逻辑
• 用普通变量loggedIn存储状态，状态修改后无法触发组件重新渲染

实现方案 #

场景1：仅读取本地sessionStorage判断登录状态 #

读取sessionStorage是同步操作，不需要使用async/await，直接按如下写法实现即可：

import { useState, useEffect } from 'react';

function YourRouterComponent() {
  // 用useState存储登录状态，保证状态变化触发组件更新
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // 空依赖数组保证仅在DOM首次挂载完成后执行一次
    const username = sessionStorage.getItem('username');
    setIsLoggedIn(username !== null);
  }, []);

  // 后续可根据isLoggedIn的值控制路由跳转/页面渲染
  return <div>{/* 你的组件逻辑 */}</div>;
}

场景2：需要调用后端接口异步校验登录状态 #

如果需要通过异步接口校验登录有效性，按如下规范在useEffect中使用async/await：

import { useState, useEffect } from 'react';

// 假设这是你封装的后端登录校验异步方法
const checkUserLogin = async () => {
  // 你的接口请求逻辑，返回布尔值表示登录是否有效
  const res = await fetch('/api/check-login');
  return res.ok;
};

function YourRouterComponent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 在useEffect内部定义异步函数，再调用
    const verifyLogin = async () => {
      try {
        const valid = await checkUserLogin();
        setIsLoggedIn(valid);
      } catch (err) {
        console.error('登录校验失败', err);
        setIsLoggedIn(false);
      } finally {
        setLoading(false);
      }
    };

    verifyLogin();
  }, []);

  if (loading) return <div>加载中...</div>;

  return <div>{/* 你的组件逻辑 */}</div>;
}

注意：不要直接将async函数作为useEffect的入参，useEffect的返回值只能是清理函数，直接传入async函数会返回Promise，不符合钩子规范。

内容的提问来源于stack exchange，提问作者M N Tushar