修復討厭的錯誤（理解模態） - 第 1 部分-js教程-PHP中文網

調試 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>

登入後複製