Question

我正在使用NextJS的useRouter来访问路由器，如下所示：

const router = useRouter();

但是，当我的组件渲染时，我倾向于注意到router可以是null，直到它实际实例化为止。我的解决方法是做这样的事情：

const router = useRouter();

if (!router) return null;

return (
  // ... jsx
);

但是，我有一个正在使用的自定义钩子，它取决于路由器的查询：

const router = useRouter();

if (!router) return null;

const {data} = useCustomHook(router.query.id);

return ( //.... )

但是我遇到了这样的错误：

React Hook "useCustomHook" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

我的解决方法是制作两个单独的组件来处理此条件：

const HookComponent = ({ id }) => {
  const { data } = useCustomHook(id);
  return ( // ....)
}

const HookComponentWrapper = () => {
  const router = useRouter();
  if (!router) return null;

  return <HookComponent id={router.query.id}/>
}

我的问题是：是否可以避免仅出于条件而添加该包装器？

Answer 1

由于router有时可以为null，因此您可以使用保护子句来访问传递给该挂钩的id。 useCustomHook仍需要优雅地处理空输入。

const {data} = useCustomHook(router && router.query && router.query.id);

或在构建允许的情况下使用optional chaining

const {data} = useCustomHook(router?.query?.id);

在这一点上，我建议只传递router对象，并在任何自定义钩子中处理从中提取所需的内容。

有什么办法可以解决这种有条件的钩子变通办法吗？

1 个答案: