Membaiki Pepijat Jahat(Memahami Modal) - Bahagian 1

Menyahpepijat Pepijat Menjengkelkan dalam Projek Next.js

Pada minggu lepas, saya mula mengerjakan projek baharu yang dibina terutamanya dengan Next.js dan digayakan menggunakan perpustakaan komponen Shadcn. Semasa membina, saya menghadapi pepijat yang sangat menjengkelkan yang bukan sahaja melambatkan saya tetapi juga mendorong saya untuk mempertimbangkan semula pendekatan saya untuk menyahpepijat dan memahami alatan yang saya gunakan.

Mengapa Menulis Tentang Ini?

Tujuan menulis artikel ini adalah untuk memaksa diri saya menyelam lebih dalam untuk memahami cara kerja dalaman komponen dan rangka kerja. Pada masa lalu, saya telah menulis kod yang berfungsi dengan baik tetapi tidak mempunyai masa untuk memahami secara mendalam apa yang saya tulis. Kali ini, saya ingin menggunakan pendekatan sistematik untuk memaksa saya mempelajari cara kerja dalaman sesuatu dan tiada apa yang memaksa anda untuk perlahan apabila mengekodkan pepijat yang melanda. Menulis tentangnya akan membantu saya merenung, belajar dan berkongsi perjalanan saya.

Pendekatan Sistematik untuk Penyahpepijatan

Untuk menyelesaikan isu ini, saya telah memecahkan proses penyahpepijatan kepada tiga langkah sistematik:

1. Replikasi Pepijat: Kembali ke komitmen khusus di mana isu itu berlaku, semak kod dan hasilkan semula ralat dengan pasti.
2. Fahami Mengapa Pepijat Berlaku: Analisis punca dan interaksi antara komponen yang membawa kepada masalah.
3. Betulkan Pepijat: Laksanakan penyelesaian dan sahkannya.

Artikel ini akan membincangkan langkah pertama secara terperinci.

---

Meniru Pepijat

Berikut ialah komponen bermasalah yang menyebabkan saya banyak masalah:

Coretan Kod: 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;

Coretan Kod: Menu Jatuh Turun

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

Apa yang Komponen Ini Lakukan

1. Menu Turun: Apabila diklik, komponen ini memaparkan senarai tindakan lungsur turun.

1. Komponen Dialog: Dialog mod ini dicetuskan dengan memilih tindakan daripada menu lungsur. Ia memaparkan maklumat terperinci dan mempunyai butang tutup untuk menolaknya.

Pepijat

Apabila menu lungsur diklik, ia dibuka seperti yang dijangkakan. Di dalam menu lungsur, terdapat pilihan untuk melihat butiran, yang mencetuskan komponen Dialog untuk muncul. Masalah berlaku apabila dialog ditutup—tiada apa-apa lagi pada halaman yang boleh diklik selepas itu. Ini membingungkan kerana kedua-dua komponen kelihatan berfungsi dengan sempurna secara berasingan.

---

Kekecewaan

Walaupun menghabiskan beberapa jam menyiasat, saya tidak dapat menentukan punca isu itu. Interaksi antara komponen lungsur turun dan dialog nampaknya mewujudkan beberapa jenis ketidakkonsistenan keadaan atau isu DOM.

Akhirnya, saya memilih untuk menggantikan salah satu komponen sepenuhnya, yang menyelesaikan isu itu buat sementara waktu. Walau bagaimanapun, saya tidak berpuas hati tanpa memahami punca utama, itulah yang saya rancang untuk meneroka lebih lanjut.

Kesimpulan

Ini menyimpulkan bahagian pertama perjalanan penyahpepijatan saya—mereplikasi pepijat dan mendokumentasikan masalah. Dalam bahagian seterusnya, saya akan menyelami lebih mendalam tentang kerja dalaman komponen ini untuk memahami perkara yang mungkin menyebabkan tingkah laku luar biasa ini. Dengan berbuat demikian, saya berharap dapat memperoleh cerapan yang akan membantu saya membetulkan pepijat yang serupa pada masa hadapan dan berkembang sebagai pembangun.

Nantikan Bahagian 2: Memahami Mengapa Pepijat Berlaku.

Atas ialah kandungan terperinci Membaiki Pepijat Jahat(Memahami Modal) - Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!