有没有办法解决这个条件挂钩解决方法？答案

【问题标题】：Is there any way around this conditional hook workaround?有没有办法解决这个条件挂钩解决方法？
【发布时间】：2020-09-16 04:07:21
【问题描述】：

我正在使用 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 ( //.... )

但是我得到一个像这样的 eslint 错误：

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}/>
}

我的问题是：是否可以避免只为条件添加该包装器？

【问题讨论】：

标签： reactjs react-hooks next.js

【解决方案1】：

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

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

如果您的构建允许，请使用optional chaining

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

此时我建议只传递router 对象并在任何自定义挂钩中处理从中提取您需要的内容。

【讨论】：