IT技术 - 这是避免“您是否在提前返回后不小心调用了 React Hook 的安全方法？” - 吾爱随笔录

我写了一个这样的函数组件：

export const SiteMap: React.FunctionComponent = () => {

  return useGetSetData<I.SiteMap>({
    title: "Site Map",
    getData: () => IO.getSiteMap(),
    showData: Page.SiteMap
  });
}

这很好用。

顺便说一下，myuseGetSetData是一个“高阶组件”函数，它使用useState和useEffect获取数据，然后将该数据（在获取之后）传递给要显示的传入呈现组件。它的参数是：

interface UseGetDataPropsT<T> {
  title: string,
  getData: () => Promise<T>,
  showData: (data: T) => ReactElement
}

无论如何，下次我尝试使用一个页面时，其内容取决于 URL 中的其他一些内容，我将其编码如下：

type RouterProps = ReactRouter.RouteComponentProps<any>;

export const Image: React.FunctionComponent<RouterProps> = (props: RouterProps) => {

  const imageId: number | undefined = getId(props, "Image");
  if (!imageId) {
    return NoMatch(props);

  return useGetSetData<I.Image>({
    title: "Image",
    getData: () => IO.getImage(imageId),
    showData: Page.Image
  });
}

这会产生一条错误消息：

React Hook "useGetSetData" 被有条件地调用。在每个组件渲染中，必须以完全相同的顺序调用 React Hook。您是否在提前返回后不小心调用了 React Hook？react-hooks/钩子规则

如果我按如下方式重新编码，则它可以工作：

export const Image: React.FunctionComponent<RouterProps> = (props: RouterProps) => {

  const imageId: number | undefined = getId(props, "Image");
  if (!imageId) {
    return NoMatch(props);

  return ImageId(imageId);
}

export const ImageId: React.FunctionComponent<number> = (imageId: number) => {
  return useGetSetData<I.Image>({
    title: "Image",
    getData: () => IO.getImage(imageId),
    showData: Page.Image
  });
}

这是一个微不足道的变化，即它在功能上等同于我之前编写的代码。

它避免了上面的错误消息，并且它似乎可以正确运行。

我的问题是：

我的变通方法安全吗，即这个代码好吗？
如果不是那么在什么情况下它可能会失败