NextJS auth0 useUser 钩子与其他钩子 - 处理多个 isLoading 最佳实践

Question

我正在使用 Auth0 和 NextJS。

Auth0 为我提供了客户端上的

useUser()

钩子，它返回像

{ user, isLoading, isError }

这样的道具。

我还使用

useSWR()

在客户端获取数据，这也会返回像

{ data, isLoading, isError }

这样的道具。

如果我需要在同一页面上使用多个加载或错误道具，建议使用哪些方法来处理客户端上的多个加载或错误道具？

我考虑过的事情：

• 忽略一个，优先考虑另一个。例如，如果获取用户时出错，我可能无法获取客户端数据（因为这取决于用户）。
• 在解构期间重命名它们。例如。

  { user, isLoading: userLoading }

  并分别处理每个案例。 （如果我需要在多个组件中做同样的事情，似乎可能很冗长。
• 某种进一步的分离，以及组件之间的道具传递。这似乎是可能的。但也感觉我的组件最终会与其结构耦合，这是我想避免的。

针对这种情况，推荐的方法是什么？

Answer 1

是的，你绝对可以重命名它，这就是我在我的应用程序上所做的方式。我所有的钩子都返回 4 个相同的值 ({data, isLoading, error, reload}) 我只是根据我处理的数据类型重命名它。

   const {
    data: createUserPayoutData,
    isLoading: isCreateUserPayoutDataLoading,
    error: createUserPayoutDataError,
} = useCreateUserPayOut();
const {
    data: walletData,
    isLoading: isWalletDataLoading,
    error: walletDataError,
} = useGetUserWallet();