Next.js Shadcn 对话框组件出现水合错误

Question

我在使用 Shadcn Dialog 组件时在 Next.js 项目中遇到水合错误。错误信息是：

“水合失败，因为初始 UI 与服务器上呈现的内容不匹配。”

以下是关键组件：

modal.tsx：

// Importing Dialog components from Shadcn
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";

interface ModalProps {
  title: string;
  description: string;
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode;
}

export const Modal: React.FC<ModalProps> = ({
  title,
  description,
  isOpen,
  onClose,
  children
}) => {
  const onChange = (open: boolean) => {
    if (!open) {
      onClose();
    }
  };

  return ( 
    <Dialog open={isOpen} onOpenChange={onChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>
            {description}
          </DialogDescription>
        </DialogHeader>
        <div>
          {children}
        </div>
      </DialogContent>
    </Dialog>
  );
};


import { Modal } from "@/components/ui/modal";

const SetupPage = () => {
  return (
    <div className="p-4" suppressHydrationWarning={true}>
      <Modal title="Test" description="Test Desc" isOpen onClose={() => {}}>
        Children
      </Modal>
    </div>
  );
}

export default SetupPage;

我已经包含了相关的代码片段，问题是在水合过程中出现的。任何见解或解决方案将不胜感激。谢谢！

尝试在Next.js项目中使用Shadcn的Dialog组件。期望渲染顺利，却遇到了水合错误：

Answer 1

我遇到了和你一样的错误。在处理模态弹窗时，经常会出现水合错误，这是由于服务器端和客户端渲染结果不匹配造成的。

一种解决方法是添加检查逻辑以确保您的对话框仅在客户端呈现：

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return <YourDialogComponent/>  // only on client side

我相信你正在尝试建立一个电子商务网站，观看Code With Antonio，因为你的源代码与他的教程内容完全匹配（我也在做同样的事情哈哈）（如果我错了，请原谅我）。 之后他在教程中做了与上述相同的操作，因此如果您继续关注，一段时间后您就不会收到此错误。

干杯！

另请参阅：

https://nextjs.org/docs/messages/react-Hydration-error

https://github.com/radix-ui/primitives/issues/1386

如何解决Nextjs中的反应水合错误