带有异步功能的 ReactJS Suspense

编程问答 2022-06-02

问题描述

你好，当我的数据从我的 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 (将#修改为@）

mobxmobxmobxmobxreact-suspensereactjsreactjsreactjsreactjs