首页 >web前端 >js教程 >修复讨厌的错误（理解模态） - 第 1 部分

修复讨厌的错误（理解模态） - 第 1 部分

Susan Sarandon原创: 2025-01-17 08:29:08338浏览

调试 Next.js 项目中烦人的错误

上周的某个时候，我开始开发一个新项目，主要使用 Next.js 构建，并使用 Shadcn 组件库进行样式设计。在构建过程中，我遇到了一个特别烦人的错误，它不仅减慢了我的速度，还促使我重新考虑调试和理解我使用的工具的方法。

为什么要写这个？

写这篇文章的目的是迫使自己更深入地了解组件和框架的内部工作原理。过去，我编写的代码运行良好，但没有时间深入理解我所编写的内容。这一次，我想采用一种系统的方法来迫使我学习事物的内部运作方式，并且没有什么可以强迫你在编码遇到错误时放慢速度。写下它将帮助我反思、学习和分享我的旅程。

系统的调试方法

为了解决这个问题，我将调试过程分为三个系统步骤：

复制 Bug： 返回到发生问题的特定提交，检查代码，并可靠地重现错误。
了解错误发生的原因：分析导致问题的根本原因以及组件之间的交互。
修复错误：实施解决方案并验证它。

本文将详细介绍第一步。

复制错误

这是给我带来很多麻烦的有问题的组件：

代码片段：OrganizationDetailsModal

"use client";
import { motion } from "framer-motion";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { useState } from "react";

const OrganizationDetailsModal: React.FC<OrganizationDetailsModalProps> = ({ hideModal, organization }) => {
  const [open, setOpen] = useState(true);
  const handleClose = () => {
    hideModal();
    setOpen(false);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) {
          handleClose();
        }
      }}
    >
      <DialogContent
        onCloseAutoFocus={(e) => {
          e.preventDefault();
          const safeElement = document.getElementById("safe-focus-element");
          if (safeElement) safeElement.focus();
        }}
        className="flex max-h-[80vh] w-[400px] flex-col rounded-xl bg-white px-5 py-4 overflow-y-auto"
      >
        <DialogHeader>
          <div className="flex justify-between items-center">
            <DialogTitle>Organisation Details</DialogTitle>
            <DialogClose asChild>
              <button onClick={handleClose} className="text-gray-700 hover:text-gray-900">X</button>
            </DialogClose>
          </div>
        </DialogHeader>

        <div className="space-y-4">
          <div className="flex justify-between">
            <span className="text-sm font-semibold">Organization Name</span>
            <span className="text-sm">{organization.organizationName}</span>
          </div>
        </div>

        <DialogFooter>
          <button onClick={handleClose} className="bg-primary-green text-white px-4 py-2 rounded-md">
            Back
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default OrganizationDetailsModal;

代码片段：下拉菜单

<DropdownMenu>
  <DropdownMenuTrigger className="focus:outline-none">
    <MoreHorizontal className="h-5 w-5 cursor-pointer" />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start" sideOffset={4} className="rounded-md p-1 shadow-md">
    {rowMenuItems.map((menuItem, menuIndex) => (
      <DropdownMenuItem
        key={menuIndex}
        onClick={() => menuItem.onClick(row)}
        className="flex justify-start gap-2 px-3 py-2 hover:bg-gray-100"
      >
        {menuItem.icon && <Image src={menuItem.icon} alt={menuItem.label} />}
        <span>{menuItem.label}</span>
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>