reactjs - 更改完成长时间操作后返回的组件

Question

我的组件如下所示：

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

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

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

标签： reactjsasync-awaitpromise

Answer 1

使用状态来确定数据何时加载/完成/失败

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>)

}