![](/img/trans.png)
[英]Invalid prop: type check failed for prop "items". Expected Array, got String
[英]NextJS error message: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead
我正在将 header 从 GatsbyJS 项目实施到 NextJS 项目中,并收到以下错误消息:
“错误:失败的道具类型:道具href
在<Link>
中需要一个string
或object
,但undefined
。”
从 header.jsx 中删除以下内容时,它不会提供任何错误消息:<MenuButton item={{ icon: "/images/icons/hamburger.svg" }} />
你能指导我做错什么吗?
这是我的 header.jsx 文件:
import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import Link from "next/link";
import { menuData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton.jsx";
import Image from "next/image";
import MenuTooltip from "../tooltips/MenuTooltip";
export default function Header() {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
const tooltipRef = useRef();
function handleClick(event) {
setIsOpen(!isOpen);
event.preventDefault();
}
function handleClickOutside(event) {
if (
ref.current &&
!ref.current.contains(event.target) &&
!tooltipRef.current.contains(event.target)
) {
setIsOpen(false);
}
}
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<Wrapper>
<Link href="/">
<Logo>
<Image
src="/images/logos/logo.png"
alt="Logo"
width={120}
height={100}
/>
</Logo>
</Link>
<MenuWrapper count={menuData.length} ref={ref}>
{menuData.map((item, index) => (
<MenuButton key={index} item={item} />
))}
<HamburgerWrapper onClick={(event) => handleClick(event)}>
<MenuButton item={{ icon: "/images/icons/hamburger.svg" }} />
</HamburgerWrapper>
</MenuWrapper>
<div ref={tooltipRef}>
<MenuTooltip isOpen={isOpen} />
</div>
</Wrapper>
);
}
这是我的 menuTooltip.jsx 文件:
import React from "react";
import styled from "styled-components";
import { tooltipData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton";
export default function MenuTooltip(props) {
const { isOpen } = props;
return (
<Wrapper isOpen={isOpen}>
{tooltipData.map((item, index) => (
<MenuButton key={index} item={item} />
))}
</Wrapper>
);
}
这是我的 MenuButton.jsx 文件:
import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { Caption } from "../styles/TextStyles";
export default function MenuButton(props) {
const { item } = props;
return (
<Link href={item.link} onClick={props.onClick} key={props}>
<MenuItem hasTitle={!item.title ? false : true}>
<img src={item.icon} />
{item.title}
</MenuItem>
</Link>
);
}
这是我的 menuData.jsx 文件:
export const menuData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
];
export const footerMenuData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
{
title: "Updates",
icon: "/images/icons/calendar_light.svg",
link: "/updates",
},
{
title: "Help",
icon: "/images/icons/help_light.svg",
link: "/help",
},
];
export const tooltipData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
];
您在链接中添加一个标签,如下所示:
<link href....> <a> <image> <p> text </p> </a> </link>
我也经常遇到这个错误...
哦,天哪。 我被这个问题困扰了很长时间,终于设法解决了它,虽然我很高兴接受的答案对你有用。 遗憾的是它不适合我,所以,我将在NextJS 官方 GitHub 回购的讨论线程中找到的修复程序留在这里。
而不是将链接密钥直接传递到Link
的href
道具中:
<Link href={item.link} {...other props}>...</Link>
像这样在字符串文字中传递它:
<Link href={`${item.link}`} {...other props}>...</Link>
如果需要,您可以将Link
组件的子项包装在<a>
标记中,但这不是必需的,而我的组件在没有它的情况下也能正常工作。 仅供参考,我在Link
组件中有一些 SVG 图标,这些图标引起了所有这些大惊小怪。 叹!
对于从 react-router-dom 迁移到 next.js 内置链接组件的任何其他人。
这个错误发生在我身上是因为我正在从 react-router-dom 迁移到 Next.js 中的内置 Link 组件,而我忘记将<Link></Link>
组件中的to=""
属性更改为href=""
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.