错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配答案

【问题标题】：Error: Hydration failed because the initial UI does not match what was rendered on the server错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配
【发布时间】：2023-01-30 23:28:17
【问题描述】：

我有

未处理的运行时错误

错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

在我的 NEXT.js (tailwind CSS) 应用程序中

请帮我解决这个问题。

import React from "react";
import { SocialIcon } from "react-social-icons";
import { motion } from "framer-motion";
import Link from "next/link";

function Header() {
  return (
    <>
      <header className="sticky top-0 p-5 flex items-start justify-between max-w-7xl mx-auto z-20 xl:items-center">
        <motion.div
          initial={{
            x: -500,
            opacity: 0,
            scale: 0.5,
          }}
          animate={{
            x: 0,
            opacity: 1,
            scale: 1,
          }}
          transition={{
            duration: 1.5,
          }}
          className="flex flex-row items-center"
        >
          {/* Social Icons */}
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
          <SocialIcon
            url="https://twitter.com/"
            fgColor="gray"
            bgColor="transparent"
          />
        </motion.div>

        <Link href="#contact">
          <motion.div
            initial={{
              x: 500,
              opacity: 0,
              scale: 0.5,
            }}
            animate={{
              x: 0,
              opacity: 1,
              scale: 1,
            }}
            transition={{
              duration: 1.5,
            }}
            className="flex flex-row items-center text-gray-300 cursor-pointer"
          >
            <div>
              <SocialIcon
                className="cursor-pointer"
                network="email"
                fgColor="gray"
                bgColor="transparent"
              />
              <p className="uppercase hidden md:inline-flex text-sm text-gray-400 ">
                Get In Touch
              </p>
            </div>
          </motion.div>
        </Link>
      </header>
    </>
  );
}

export default Header;

这是我的代码文件，这个错误发生在

              <SocialIcon
                className="cursor-pointer"
                network="email"
                fgColor="gray"
                bgColor="transparent"
              />

仅此部分。如果我删除了这个图标就不会发生请帮我解决。

firefox 和 chrome 浏览器也会出现此错误。

【问题讨论】：

您使用的是哪个版本的 Next.js？另外，SocialIcon 呈现什么 HTML 元素？
从“react-social-icons”导入{SocialIcon}；
“下一步”：“13.0.0”，
好的，但是 SocialIcon 渲染的是什么 HTML 元素？例如，它是a 标签还是button？ Link 组件呈现一个 a 元素，如果您将 a 与另一个 a 或 button 与 a 包装在一起，Next.js 会生气，从而导致此错误。这可能是问题所在。
您是否包括了完整的错误？它通常会准确告诉您不匹配的内容，以及初始值和更改值。

标签： javascript reactjs next.js tailwind-css

【解决方案1】：

如果您查看控制台内部，您会发现以下错误：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

这是 <Link> 标签内的 <SocialIcon> - 也就是 <a> 内的 <a>。我对你同样问题的解决方案是用<Link> 标签而不是整个<motion.div> 包装<p>标签。

【讨论】：

【解决方案2】：

我有同样的问题。

而不是这个：

<Link href="#contact">
      <motion.div
        initial={{
          x: 500,
          opacity: 0,
          scale: 0.5,
        }}
        animate={{
          x: 0,
          opacity: 1,
          scale: 1,
        }}
        transition={{
          duration: 1.5,
        }}
        className="flex flex-row items-center text-gray-300 cursor-pointer"
      >
        <div>
          <SocialIcon
            className="cursor-pointer"
            network="email"
            fgColor="gray"
            bgColor="transparent"
          />
          <p className="uppercase hidden md:inline-flex text-sm text-gray-400 ">
            Get In Touch
          </p>
        </div>
      </motion.div>
    </Link>

做这个：

<motion.div
    initial={{
      x: 500,
      opacity: 0,
      scale: 0.5,
    }}
    animate={{
      x: 0,
      opacity: 1,
      scale: 1,
    }}
    transition={{
      duration: 1.5,
    }}
    className="flex flex-row items-center text-gray-300 cursor-pointer"
  >
    <SocialIcon
      className="cursor-pointer"
      network="email"
      url="#contact"
      fgColor="gray"
      bgColor="transparent"
    />

    <Link href="#contact">
      <p className="uppercase hidden md:inline-flex text-sm text-gray-400">
        get in touch
      </p>
    </Link>
  </motion.div>

这将解决问题。这是因为 Link 也是一个标签，而 SocialIcon 也是一个标签。所以，这导致了 .

【讨论】：