Как сделать хук из моего кода React.js/Next.js?
Я пытаюсь сделать ловушку из своего кода, но у меня возникла проблема. Мой код из файла хука:
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: строка; }' можно вызвать."
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
const { asPath, locale, defaultLocale } = useRouter();
if (locale === defaultLocale) return { asPath };
Вы деструктурируете asPath из useRouter(); в первой строке, но затем возвращаете его внутри объекта во второй.
пытаться:
const { asPath, locale, defaultLocale } = useRouter();
if (locale === defaultLocale) return asPath;
Ваша функция должна возвращать строку независимо от этого.
Следующая строка:
const getCurrentPath = useCurrentPath();
присваивает результат вызова useCurrentPath константе getCurrentPath. Этот результат, основанный на вашем хуке, является либо string, либо объектом типа { asPath: string }.
Этот результат не является функцией и, следовательно, не может быть вызван. И вы вызываете это внутри JSX - в isActive атрибуте <SubHeaderLink />).
Вы, вероятно, имели в виду:
const getCurrentPath = useCurrentPath
, потому что useCurrentPath вызывается. Или, альтернативно:
const getCurrentPath = () => useCurrentPath()
Другая проблема заключается в том, что вы не всегда возвращаете string из своего пользовательского хука.
Я считаю, что вы должны заменить return { asPath } на return asPath внутри вашего хука, чтобы хук всегда возвращал string, что, скорее всего, вам и нужно.
Проблема в том, что вы возвращаете строку/объект из своего хука, а затем пытаетесь вызвать его как функцию.
Незначительные изменения, я бы предложил:
- Вы должны возвращать строку из своего хука. Возвращайте asPath вместо объекта.
import { useRouter } from "next/router";
const useCurrentPath = () => {
const { asPath, locale, defaultLocale } = useRouter();
if (locale === defaultLocale) return asPath;
return `/${locale}${asPath}`;
};
export default useCurrentPath;
- Используйте строку напрямую вместо того, чтобы пытаться вызвать объект/строку, что и вызывает ошибку.
<SubHeaderLink
key = {_uid}
href = {getHref(href)}
name = {linkName}
isActive = { getCurrentPath === getHref(href)}
/>