Reactjs:mobx异步调用的错误边界

您好，我正在尝试为我的系统实现错误边界，但是我遇到了问题。我对我的api进行了异步调用，以检查后端是否已启动，以及浏览器会话是否为auth。为了进行测试，我让后端处于打开状态，但没有调用回退，我正在使用lib:react error boundary 如果有人能帮我，我很感激

错误：

商店：

  public initApi = async (): Promise<void> => {
    this.appState = 'pending'
    try {
      const response = await this.AxiosStore.get('/')
      if (!response) return Promise.reject(new Error('Service Unavaliable'))
      return runInAction(() => {
        if (response.data.acess_token)
          this.currentUserStore.accessToken = response.data.access_token
        this.appState = 'fulfilled'
      })
    } catch (error) {
      runInAction(() => {
        this.appState = 'error'
      })
      return Promise.reject(error)
    }
  }
}

const AuthApp: React.FC<{
  isAuth: boolean
}> = observer(({isAuth}) => {
  return (
    <>
      {isAuth ? (
        <Suspense fallback={<h1>fb</h1>}>
          <DashBoard />
        </Suspense>
      ) : (
        <Suspense fallback={<h1>login</h1>}>
          <LoginPage />
        </Suspense>
      )}
    </>
  )
})

const App: React.FC = observer(() => {
  const {
    layoutStore,
    initApi,
    appState,
    currentUserStore,
    authStore,
  } = useRootStore()
  const handleError = useErrorHandler()
  useEffect(() => {
    if (appState !== 'fulfilled') initApi().catch((error) => handleError(error))
  }, [])
  return (
    <ThemeProvider theme={layoutStore.isDarkMode ? darkTheme : lightTheme}>
      <GlobalReset />
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        {appState === 'fulfilled' ? <AuthApp isAuth={authStore.isAuth} /> : 'b'}
      </ErrorBoundary>
    </ThemeProvider>
  )
})

public initApi=async（）：Promise=>{
this.appState='pending'
试一试{
const response=wait this.AxiosStore.get（“/”）
if（！response）返回Promise.reject（新错误（'Service unavailable'））
返回runInAction（（）=>{
if（response.data.access_令牌）
this.currentUserStore.accessToken=response.data.access\u令牌
this.appState='已完成'
})
}捕获（错误）{
运行不活动（（）=>{
this.appState='error'
})
返回承诺。拒绝（错误）
}
}
}

应用程序：

  public initApi = async (): Promise<void> => {
    this.appState = 'pending'
    try {
      const response = await this.AxiosStore.get('/')
      if (!response) return Promise.reject(new Error('Service Unavaliable'))
      return runInAction(() => {
        if (response.data.acess_token)
          this.currentUserStore.accessToken = response.data.access_token
        this.appState = 'fulfilled'
      })
    } catch (error) {
      runInAction(() => {
        this.appState = 'error'
      })
      return Promise.reject(error)
    }
  }
}

const AuthApp: React.FC<{
  isAuth: boolean
}> = observer(({isAuth}) => {
  return (
    <>
      {isAuth ? (
        <Suspense fallback={<h1>fb</h1>}>
          <DashBoard />
        </Suspense>
      ) : (
        <Suspense fallback={<h1>login</h1>}>
          <LoginPage />
        </Suspense>
      )}
    </>
  )
})

const App: React.FC = observer(() => {
  const {
    layoutStore,
    initApi,
    appState,
    currentUserStore,
    authStore,
  } = useRootStore()
  const handleError = useErrorHandler()
  useEffect(() => {
    if (appState !== 'fulfilled') initApi().catch((error) => handleError(error))
  }, [])
  return (
    <ThemeProvider theme={layoutStore.isDarkMode ? darkTheme : lightTheme}>
      <GlobalReset />
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        {appState === 'fulfilled' ? <AuthApp isAuth={authStore.isAuth} /> : 'b'}
      </ErrorBoundary>
    </ThemeProvider>
  )
})

const AuthApp:React.FC=observer（{isAuth}）=>{
返回(
{isAuth(
) : (
)}
)
})
const-App:React.FC=观察者（（）=>{
常数{
layoutStore，
initApi，
appState，
currentUserStore，
authStore，
}=useRootStore（）
const handleError=useErrorHandler（）
useffect（（）=>{
if（appState！=“已完成”）initApi（）.catch（（错误）=>handleError（错误））
}, [])
返回(
{appState==='completed'？：'b'}
)
})

您需要处理有错误的异步场景，

react error boundary

有一个专门的

钩子

//创建钩子
const handleError=useErrorHandler（）//从react错误边界进行挂钩
//将捕捉块中的错误传递给钩子
yourAsyncFunction（）.catch（e=>handleError（e））

或者使用

try/catch

：

试试看{
等待您的异步函数（）
}
捕获（e）{
扶手箭头（e）
}

我尝试使用yourAsyncFunction（）.catch（e=>handleError（e）），但没有成功。我更新了问题代码，你能帮我吗？你能显示更新的代码吗？