我正在使用Next.js制作网站，每次都显示上述错误。
不知道我的代码出了什么问题
const Login = () => {
const [userMsg, setUserMsg] = useState("");
const [email, setEmail] = useState("");
const router=useRouter();
const handleOnChangeEmail = (e) => {
e.preventDefault();
setUserMsg("");
console.log("event", e);
const email = e.target.value;
setEmail(email);
};
const handleLoginWithEmail = (e) => {
e.preventDefault();
if (email) {
if (IsEmail.validate(email)){
router.push("/")
}else{
setUserMsg("Enter a valid email address")
}
} else {
//show usermssg
setUserMsg("Enter an email address");
}
};
return (
<div className="bg-[url('/static/bglg.jpg')] flex items-stretch flex-col h-screen w-full">
<head>
<title>NeoVest SignIn</title>
</head>
<header className="text-4xl px-10 py-2 font-black">
<span className="text-indigo-700">NeoVest</span>
</header>
<div className="w-full max-w-xs m-auto bg-[#C9C9C9] rounded p-5 bg-opacity-50 border-gray-200">
<header>
<div className="text-indigo-700 font-black text-3xl py-2">
<p>Sign In</p>
</div>
</header>
<form className="py-5">
<div>
<label className="block mb-2 text-indigo-500" for="username">
Email
</label>
<input
className="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300"
type="text"
name="username"
placeholder="Email Address"
onChange={handleOnChangeEmail}
/>
<div className="block mb-2 text-red-700">
<p>{userMsg}</p>
</div>
</div>
<div>
<input
className="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded"
type="button"
value="Submit"
onClick={handleLoginWithEmail}
/>
</div>
</form>
</div>
</div>
);
};
显示的另一个错误是由于一些悬疑边界导致根用户切换到客户端呈现:
错误:补水时出错。因为错误发生了在悬念边界之外，整个根将切换到客户端呈现。
如果信息很重要，我也会使用Tailwind。
如果你看一下控制台，你会看到一个警告。
Warning: validateDOMNesting(...): <head> cannot appear as a child of <div>
所以，要解决这个问题，你只需要把头部移出div，并将其移动到另一个更高的组件。
如果你在chrome中有这个警告:
validatedomnested(…):
<head>不能作为<div>的子节点出现
你的DOM树没有在浏览器中正确打印，一个或多个标签没有正确关闭。
问题是:
<head>
<title>NeoVest SignIn</title>
</head>
要解决这个问题，首先导入Head，然后将其与大写"H">
一起使用。import Head from "next/head"
<Head>
<title>NeoVest SignIn</title>
</Head>
时间和随机性是最常见的两个因素。
正如在水合错误-文本内容不匹配服务器端呈现的HTML中所讨论的，一个可能的解决方案可能是使用useEffect钩子。
const AllNames = ["Ali", "Elisa", "Bella", "Carmen"];
export default function ModernNames(){
const [randomNames, setRandomNames] = useState([]);
useEffect(() => {
const randomUniqueNames = Array.from({ length: 4 })
.map((_, index) => {
let randomIndex = Math.floor(Math.random() * AllNames.length);
let name = AllNames[randomIndex];
return { name };
});
setRandomNames(randomUniqueNames);
}, []);
return (
<div>
<h1>ModernNames</h1>
{ randomNames.map((name, index) => (
<p key={index}>{name.name}</p>
))}
</div>
);
}
在我的例子中，"在补水时出现错误. ...&;"当我尝试在react-hot-toast中添加Toaster或react-toastify中的ToastContainer时，它就出现了。Tsx，我删除了它，并将此toast设置为任何需要使用的组件，希望它有帮助
我在代码中验证了一些主题。
首先，验证next.config.js中是否声明了styled-components。
reactStrictMode: true,
compiler: {
styledComponents: true,
},
第二，我检查了.babelrc是否在根文件夹中创建，内容如下:
{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}
错误仍然存在。
一个组件一个组件地检查，又发现了两个错误。首先，这样的HTML错误:
<!-- wrong -->
<p>
<ul></ul>
</p>
<!-- right -->
<p></p>
<ul></ul>
<p></p>
<!-- or right -->
<div>
<ul></ul>
</div>
最后，我在初始化组件时发现了一个错误。在我的例子中，我错误地声明了一个const items(对象)。正确的执行方法是使用useState:
<!-- WRONG WAY THAT I WAS DID -->
const Works = () => {
const items = [
{
id: 1,
name: 'any name',
src: 'srcpath'
},
{
id: 2,
name: 'any name 2',
src: 'srcpath'
},
{
id: 3,
name: 'any name 3',
src: 'srcpath'
},
];
return(
items.map((item, index) => {
return(
<div key={index}>{item.name}</div>
)
}
)
});
<!-- RIGHT WAY THAT I FIXED -->
const Works = () => {
const [ item, setItem ] = React.useState();
React.useEffect(() => {
setItem([
{
id: 1,
name: 'any name',
src: 'srcpath'
},
{
id: 2,
name: 'any name 2',
src: 'srcpath'
},
{
id: 3,
name: 'any name 3',
src: 'srcpath'
},
]);
}, []);
if(item)
return(
items.map((item, index) => {
return(
<div key={index}>{item.name}</div>
)
}
)
});
在我的情况下，我有这个问题时，我的布局。我把我的Footer组件放在标签的外面。
由于我的stacktrace没有告诉我任何东西，我开始从布局开始注释掉组件。TSX文件查找错误。也许值得一提的是，我正在使用Next13和turbpack。
你可以尝试降级react版本。尝试react@17。