Reactjs 更改组件完成长操作后返回的内容

我的组件如下所示：

export default function MyComponent(){        
    //long async operation
    //return something that is set inside the async operation
}

由于异步操作需要一些时间，return语句在异步任务结束之前运行，因此它返回一些不完整的内容

---

如何更改随机长异步操作后组件返回的内容，或在结束后给我一些结果？

异步操作结束后，您必须使用状态并进行更新：

导出默认函数MyComponent{ const[loading，setLoading]=useState； 设置加载状态； //长异步操作 setLoadingfalse；//这应该在异步操作完成后运行 //返回在异步操作中设置的内容 返回装载？：；

---

} 使用状态确定数据加载/完成/失败的时间

export default function MyComponent(){
   const [loading, setLoading] = React.useState(false);
   const [data, setData] = React.useState(null);
   const [error, setError] = React.useState(null);
   React.useEffect(() => {
      setLoading(true);
      longAsyncOperation()
        .then((data) => {
            setData(data);
        })
        .catch((error) => {
            setError(error);
        })
        .finally(() => {
            setLoading(false);
        });
   }, []);        
 
   return isLoading 
      ? (<div>Loading</div>) 
      : error || !data ? (<div>{error.message}</div>)
      : (<div>Complete!</div>)

}

---

有一个更大、更惯用、更用户友好的解决方案。当您必须获取数据时，您必须维护某些状态，即数据是否正在加载或已完成获取。基于该状态，您将显示一个正在加载的UI，然后在准备显示有内容的UI时更新状态/重新加载