如何解决带有异步功能的 ReactJS Suspense
你好,当我的数据从我的 api 中获取时,我倾向于在一个悬念中呈现后备,但没有成功我使用 mobx 并具有以下异步函数:
public initApi = async (): Promise<void> => {
this.appLoaded = 'pending'
console.log('a')
return this.Axiosstore.get('/')
.then(
action('fetchSuccess',({data}: any) => {
this.appLoaded = 'loaded'
if (!data.access_token) this.authStore.isAuth = false
if (data.access_token && data.user) {
this.currentUserStore.currentUser = new usermodel(data)
this.authStore.isAuth = true
}
}),)
.catch(
action((err: Error) => {
this.appLoaded = 'error'
throw err
}),)
}
我的多伦多证券交易所:
const ApplicationRouter = observer(() => {
const {initApi,authStore} = useRootStore()
const handleError = useErrorHandler()
initApi().catch((error) => handleError(error))
return (
<Routes>
<Route path="/" element={<div>home</div>} />
<Route
path="/login"
element={authStore.isAuth === false ? <Login /> : <Navigate to="/" />}
/>
<PrivateRoute
redirectTo="/"
path="/dashboard"
component={DashBoard}
isAuth={authStore.isAuth}
>
<Route path="/" element={<div> Dash home</div>} />
<Route path="about" element={<div> Dash About</div>} />
<Route path="test" element={<div>Dash test </div>} />
<Route path="*" element={<ErrorFallback />} />
</PrivateRoute>
</Routes>
)
})
const App: React.FC = observer(() => {
const {layoutStore} = useRootStore()
return (
<ThemeProvider theme={layoutStore.isDarkMode ? darkTheme : lightTheme}>
<GlobalReset />
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense fallback={<h1>loading...</h1>}>
<ApplicationRouter />
</Suspense>
<ErrorBoundary />
</ThemeProvider>
)
})
我想在promise解决后才渲染我的函数,我可以使用条件解决它但我想使用悬念,我没有得到它,我的回退没有出现 我不知道是否有必要为此创建一个承诺包装器,我有点迷茫,我将不胜感激,如果有人可以帮助我解决这个问题,基本上我需要提供我的后备,直到我的承诺得到解决
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。