ReactJS中App.tsx添加Async关键字触发JSX组件错误

错误原因很明确：React函数组件不能是async函数。React要求组件必须同步返回JSX元素、null或undefined，而async函数的返回值会被自动包装成Promise<Element>，这不符合JSX组件的类型要求，所以TypeScript抛出了TS2786错误。

修正方案 #

我们需要把异步的Token验证逻辑放到useEffect钩子中（处理组件副作用的标准方式），同时用useState管理认证状态和加载状态。

1. 修正App.tsx代码

import { useState, useEffect } from 'react';
import { axiosClient } from './axiosClient'; // 请根据实际路径调整

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const validateSavedToken = async () => {
      const savedToken = localStorage.getItem('token');
      if (!savedToken) {
        setIsAuthenticated(false);
        setIsLoading(false);
        return;
      }

      try {
        const response = await axiosClient.post('/AuthenticateUser/ValidateToken');
        // 根据接口返回结果确认认证状态，这里假设接口返回成功即有效
        setIsAuthenticated(true);
      } catch (err) {
        // Token验证失败，清除无效token并标记未认证
        localStorage.removeItem('token');
        setIsAuthenticated(false);
        console.error('Token验证失败:', err);
      } finally {
        setIsLoading(false);
      }
    };

    validateSavedToken();
  }, []); // 空依赖数组，仅在组件首次挂载时执行一次

  // 加载状态下显示占位内容，避免页面闪烁
  if (isLoading) {
    return <div>验证身份中...</div>;
  }

  // 根据认证状态渲染对应内容
  return (
    <div className="app-container">
      {isAuthenticated ? (
        <div>欢迎，已完成身份验证</div>
      ) : (
        <div>请先登录</div>
      )}
    </div>
  );
}

export default App;

2. 优化axiosClient配置

原代码中直接在axios实例初始化时设置Authorization头存在隐患：如果页面刷新时，getToken()可能在localStorage读取前执行，导致头信息缺失。改用请求拦截器动态添加头信息更可靠：

import axios from 'axios';

export const axiosClient = axios.create({
  baseURL: URL,
  timeout: 300000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
});

// 请求拦截器：每次请求前自动添加Token
axiosClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

关键说明 #

• 永远不要把React组件定义为async函数，异步逻辑必须放到useEffect或自定义hooks中
• 加入加载状态可以提升用户体验，避免在Token验证完成前显示错误的页面内容
• 用请求拦截器动态设置Authorization头，能确保每次请求都使用最新的Token，避免初始化时的时序问题

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