我正在将 GatsbyJS 项目的标头实现到 NextJS 项目中，并收到以下错误消息：
“错误：失败的道具类型：道具href需要 astring或objectin <Link>，但得到了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 …我的标题中有一个弹出菜单显示产品。单击第一个时，无论列表中的哪一个，它都会正确导航到路径“products/some-product”。但是，如果我已经在其中一个产品页面上，并且我尝试导航到另一个产品，它会"products/"在 URL 中添加“再次”。例如"products/products/some-product"。
我正在使用 Next.js 11 和 Link。
以下是我处理带有导航的产品列表的代码的一部分：
<div>
{products.map((item) => (
<Link href={`products/${item.href}`}>
<a
key={item.name}
>
<div>
<item.icon
aria-hidden="true"
/>
</div>
<div>
<p>
{item.name}
</p>
<p>
{item.description}
</p>
</div>
</a>
</Link>
))}
</div>
我有一个 menuData.jsx 组件来跟踪我的所有产品，然后将其导入到上面的文件中。以下是 menuData.jsx 文件中的示例：
export const products = [
{
name: "some-product",
description:
"Some description",
icon: CheckIcon,
},
]
你能发现我做错了什么吗？:)
在本地计算机上的终端中使用以下命令时，应用程序在生产模式下尝试在 Next.js 应用程序中使用 next-auth 登录时失败：
`纱线构建&&纱线启动`
在终端观察到的错误信息如下：
TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:372:5)
at URL.onParseError (node:internal/url:553:9)
at new URL (node:internal/url:629:5)
at Object.redirect (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/lib/default-callbacks.js:16:65)
at createCallbackUrl (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/lib/callback-url.js:20:35)
at init (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/init.js:132:48)
at AuthHandlerInternal (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/index.js:98:28)
at AuthHandler (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/index.js:335:34)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async NextAuthHandler (/Users/name/Documents/GitHub/app/node_modules/next-auth/next/index.js:38:20) {
input: 'undefined/home',
code: 'ERR_INVALID_URL'
}
如果我在终端中使用以下命令在开发模式下运行，则不会出现该问题：
`纱线开发`
这是我的 [...nextauth].ts 文件：
import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import EmailProvider from "next-auth/providers/email";
import { …我正在尝试从 Contentful 获取富文本，但在 gatsby-source-contentful 的 4.x 版本中，文档似乎不再更新。它引用的是json，但它已更改为raw，这意味着我不知道如何进行。
这是我的代码：
import React from "react"
import { graphql, Link } from "gatsby"
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
import Layout from "../components/layout/layout"
import Img from "gatsby-image"
import SEO from "../components/layout/seo"
export const query = graphql`
query($slug: String!) {
contentfulBlogPost(slug: { eq: $slug }) {
title
publishedDate(formatString: "Do MMMM, YYYY")
featuredImage {
fluid(maxWidth: 750) {
...GatsbyContentfulFluid
}
}
body {
json
}
}
}
`
const BlogPost = props => {
const options = …我正在尝试使用 Prisma 删除数据库中的一行，仅当满足两个条件时才删除它，slug并且userId。
这就是我尝试做的：
const deleteComment = await prisma.favorites.delete({
where: {
slug: slug,
userId: userId,
},
});
这是我在 schema.prisma 中的模型：
model Favorites {
id Int @id @default(autoincrement())
slug String @db.VarChar(128)
contentType String? @db.VarChar(128)
userId String
user User? @relation(fields: [userId], references: [id])
}
如果我删除它，userId: userId,它会删除包含相同 slug 的所有行，如果多个用户添加了相同的 slug，这并不理想。
当两个条件都满足时，如何删除一行？
我正在尝试从https://headlessui.dev/react/popover实现 Popover ，但我不太清楚如何在单击菜单项时关闭菜单。
我正在使用 NextJS 和 Link，这就是我看到的行为。当我只使用 < a > 标签时，它会重新加载页面，并且菜单在重新加载时关闭，但我想利用 NextJS 的链接。
这是我的头文件，没有类名的简化：
import React, { Fragment, useState } from "react";
import { Popover, Transition } from "@headlessui/react";
import Link from "next/link";
export default function Header() {
const [navbar, setNavbar] = useState(false);
const changeNavbar = () => {
if (window.scrollY >= 80) {
setNavbar(true);
} else {
setNavbar(false);
}
};
React.useEffect(() => {
window.addEventListener("scroll", changeNavbar);
}, []);
return (
<Wrapper>
<div>
<Popover>
{({ open }) => (
<> …我有以下用例：
\n用户想要切换配置文件是否处于活动状态。
\n配置： \nNext.js、\nFauna DB、\nreact-hook-form
\n我使用 useState 来更改切换上的状态，并使用 React-hook-forms 将其他值发送到我的 Fauna 数据库以及切换中的状态。我希望切换具有数据库中的状态，当用户切换它并按下提交按钮时，我想更改数据库中的状态。
\n当我切换数据库时，我似乎无法将正确的状态发送回数据库。
\n主要成分：
\nexport default function Component() {\n const [status, setStatus] = useState(\n userData?.profileStatus ? userData.profileStatus : false\n );\n\nconst defaultValues = {\n profileStatus: status ? userData?.profileStatus : false\n };\n\nconst { register, handleSubmit } = useForm({ defaultValues });\n\n const handleUpdateUser = async (data) => {\n\n const {\n profileStatus\n } = data;\n try {\n await fetch(\'/api/updateProfile\', {\n method: \'PUT\',\n body: JSON.stringify({\n profileStatus\n }),\n headers: {\n …