如何从我的代码 React.js/Next.js 中创建一个钩子？

Question

我尝试从我的代码中创建一个钩子，但我遇到了问题。我的挂钩文件代码：

    import { useRouter } from "next/router";


    const useCurrentPath = () => {
    const { asPath, locale, defaultLocale } = useRouter();
    if (locale === defaultLocale) return { asPath };

    return `/${locale}${asPath}`;  
    };

    export default useCurrentPath;

我叫它的地方

import { SubHeaderLink, SubHeaderLinks } from "@/components/layout/subHeader/SubHeader";
import { ReactStoryblokComponent, StoryblokLink } from "@/types/storyblok";
import { useStoryblokLinkParser } from "storyblok/useStoryblokLinkParser";
import useCurrentPath from "hooks/useCurrentPath";

type Blok = {
  subHeaderLinks: { _uid: string; linkName: string; href: StoryblokLink }[];
};

const StoryblokSubHeader: ReactStoryblokComponent<Blok> = ({
  blok: { subHeaderLinks },
}) => {
  const { getHref } = useStoryblokLinkParser();
  const getCurrentPath = useCurrentPath();

  return (
    <SubHeaderLinks>
      {subHeaderLinks.map(({ _uid, href, linkName }) => (
        <SubHeaderLink
          key={_uid}
          href={getHref(href)}
          name={linkName}
          isActive={ getCurrentPath() === getHref(href)}
        />
      ))}
      ))
    </SubHeaderLinks>
  );
};

export default StoryblokSubHeader;

行

isActive={ getCurrentPath() === getHref(href)}

我遇到了“此表达式不可调用。 'string | { asPath: string; }' 类型的成分不可调用。"

Answer 1

const { asPath, locale, defaultLocale } = useRouter();
if (locale === defaultLocale) return { asPath };

您在第一行从 useRouter(); 解构 asPath，然后在第二行 return 将其放入一个对象中。

尝试：

const { asPath, locale, defaultLocale } = useRouter();
if (locale === defaultLocale) return asPath;

无论如何，您的函数都应该 return 一个字符串。

Answer 2

下一行：

const getCurrentPath = useCurrentPath();

将调用 useCurrentPath 的结果分配给 getCurrentPath 常量。根据您的钩子，该结果是 string 或 { asPath: string }.

类型的对象

该结果不是函数，因此不可调用。你在 JSX 中调用它 - 在 <SubHeaderLink />).

的 isActive 属性中

你的意思可能是：

const getCurrentPath = useCurrentPath

，因为 useCurrentPath 是可调用的。或者，或者：

const getCurrentPath = () => useCurrentPath()

另一个问题是您并不总是从自定义挂钩中返回 string。
我相信你应该在你的钩子里面用 return asPath 替换 return { asPath }，所以钩子总是 returns 一个 string，这很可能是你想要的。

Answer 3

问题是您从挂钩返回 string/object，然后尝试将其作为函数调用。

小改动，我建议：

您应该从钩子中返回一个字符串。 Return asPath 而不是对象。

    import { useRouter } from "next/router";


    const useCurrentPath = () => {
    const { asPath, locale, defaultLocale } = useRouter();
    if (locale === defaultLocale) return asPath;

    return `/${locale}${asPath}`;  
    };

    export default useCurrentPath;

直接使用字符串而不是尝试调用 object/string，这是导致错误的原因。

        <SubHeaderLink
          key={_uid}
          href={getHref(href)}
          name={linkName}
          isActive={ getCurrentPath === getHref(href)}
        />

如何从我的代码 React.js/Next.js 中创建一个钩子？

How to make a hook from my code React.js/Next.js?

javascript

reactjs

next.js