React中async匿名函数无法返回JSX按钮的问题怎么解决？

你的现有写法存在几个核心问题导致无法拿到JSX返回值：

• addButtons 本身没有返回任何值，内部自执行async函数的返回值被完全丢弃，没有对外传递
• 即使你对外返回了async函数的执行结果，拿到的也是Promise对象，React的同步渲染流程无法直接将Promise渲染为DOM元素
• 直接在渲染函数内发送请求，会导致每次组件重渲染都重复触发接口调用，存在严重的性能问题和重复请求异常

React是状态驱动的UI框架，异步请求的结果必须先存入组件状态，再通过状态控制JSX的渲染，不能直接在渲染逻辑中异步返回JSX。

基础实现方式（使用useState+useEffect）：

import { useState, useEffect } from 'react';
import axios from 'axios';

const YourComponent = ({ userId }) => {
  // 声明状态存储权限校验结果和加载状态
  const [showRemoveBtn, setShowRemoveBtn] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  // 异步请求逻辑放在useEffect中，仅在依赖变化时触发
  useEffect(() => {
    const checkUserPermission = async () => {
      try {
        const userHasCon = await axios.get(`route`);
        setShowRemoveBtn(userHasCon.data[0].Users_Id == userId);
      } catch (error) {
        // 可自行添加请求错误处理逻辑
        console.error('权限校验失败：', error);
      } finally {
        setIsLoading(false);
      }
    };

    checkUserPermission();
  }, [userId]); // 依赖项添加userId，用户ID变化时自动重新校验权限

  // 渲染逻辑直接通过状态判断是否展示按钮
  if (isLoading) return <div>权限校验中...</div>;

  return (
    <div>
      {/* 其他组件内容 */}
      {showRemoveBtn && <button>Remove</button>}
    </div>
  );
};

如果需要复用这个权限校验逻辑，可以封装为自定义Hook：

const useRemovePermission = (userId) => {
  const [showRemoveBtn, setShowRemoveBtn] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const check = async () => {
      try {
        const res = await axios.get(`route`);
        setShowRemoveBtn(res.data[0].Users_Id == userId);
      } catch (err) {
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };
    check();
  }, [userId]);

  return { showRemoveBtn, isLoading };
};

// 组件内使用
const YourComponent = ({ userId }) => {
  const { showRemoveBtn, isLoading } = useRemovePermission(userId);
  if (isLoading) return <div>加载中...</div>;
  return <div>{showRemoveBtn && <button>Remove</button>}</div>;
};

如果是React 18+项目，也可以搭配Suspense、React Query等方案实现更优雅的异步数据渲染，上述基础方案已经可以覆盖绝大多数场景的需求。

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