Javascript 导出异步函数内的组件

我习惯于反应和靠近。我需要导出一个组件，但我无权将其放入函数中

function Index(){
    
}
export default Index 

您必须接收请求，但只有在函数异步时才能写入变量。 我必须创建一个包装器

async function asy(){ 
     
    const data = await fetchData()

    function Index(){

    }
    export default Index
}

asy().then(r => r);

现在我无法导出组件

我找到了一个不同的解决方案，但它也不起作用

function Index(){
    return async function asy(){
        //async function. 

        const data = await fetchData()
        return <React.Fragment/>
    }
}

export default Index

函数索引（）{
返回异步函数asy（）{
//异步函数。
常量数据=等待获取数据（）
返回
}
}
导出默认索引

我不认为我完全理解你的问题，但以下是我理解的内容， 您希望在发出异步请求以检索数据后返回组件

我会选择这样的方式：

function Index() {
  const [data, setData] = React.useState(null);
  
  retrieveData = async () => {
     // Retrieve your data
     setData(retrievedData);
  }

  useEffect(() => {
    retrieveData();
  }, [])
  
  if (data != null) {
   return <YourComponent />
  } else {
   return null
  }
}

函数索引（）{
const[data，setData]=React.useState（null）；
retrieveData=async（）=>{
//检索您的数据
setData（检索数据）；
}
useffect（（）=>{
检索数据（）；
}, [])
如果（数据！=null）{
返回
}否则{
返回空
}
}

此代码将在每次安装此组件时调用retrieveData函数