微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

带有异步功能的 ReactJS Suspense

如何解决带有异步功能的 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 举报,一经查实,本站将立刻删除。