厄介なバグの修正 (モーダルの理解) - パート 1

Next.js プロジェクトの迷惑なバグをデバッグする

先週のある時点で、私は主に Next.js で構築され、Shadcn コンポーネント ライブラリを使用してスタイル設定された新しいプロジェクトに取り組み始めました。構築中に、特に迷惑なバグに遭遇しました。そのバグにより、作業の速度が低下しただけでなく、デバッグのアプローチと使用するツールの理解について再考する必要が生じました。

なぜこれについて書くのか?

この記事を書く目的は、コンポーネントとフレームワークの内部動作をより深く理解することを強制することです。過去に、問題なく動作するコードを書いたこともありましたが、自分が書いたものを深く理解する時間がありませんでした。今回は、体系的なアプローチを採用して、物事の内部の仕組みを強制的に学習させたいと思います。バグに遭遇する際のコーディングの速度を強制するものは何もありません。それについて書くことで、自分の旅を振り返り、学び、共有するのに役立ちます。

デバッグへの体系的なアプローチ

この問題を解決するために、デバッグ プロセスを 3 つの体系的な手順に分割しました。

1. バグを複製する: 問題が発生した特定のコミットに戻り、コードを確認して、エラーを確実に再現します。
2. バグが発生する理由を理解する: 問題の原因となった根本原因とコンポーネント間の相互作用を分析します。
3. バグを修正します: ソリューションを実装して検証します。

この記事では、最初のステップについて詳しく説明します。

---

バグの複製

私に大きな問題を引き起こした問題のあるコンポーネントは次のとおりです:

コードスニペット: 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>

これらのコンポーネントの機能

1. ドロップダウン メニュー: クリックすると、このコンポーネントはアクションのドロップダウン リストを表示します。

1. ダイアログ コンポーネント: このモーダル ダイアログは、ドロップダウンからアクションを選択することでトリガーされます。詳細情報が表示され、それを閉じるための閉じるボタンがあります。

バグ

ドロップダウンをクリックすると、期待どおりに開きます。ドロップダウン内には、詳細を表示するオプションがあり、ダイアログ コンポーネントが表示されます。この問題はダイアログが閉じられたときに発生します。その後、ページ上の他の何もクリックできなくなります。両方のコンポーネントが単独で完全に動作するように見えたので、これは複雑でした。

---

フラストレーション

調査に数時間を費やしましたが、問題の原因を特定できませんでした。ドロップダウン コンポーネントとダイアログ コンポーネント間の相互作用により、ある種の状態の不整合または DOM の問題が発生しているようです。

最終的に、コンポーネントの 1 つを完全に交換することにしました。これにより、問題は一時的に解決されました。しかし、根本的な原因が分からず不満が残りましたので、今後さらに調査していきたいと思います。

結論

これで、バグを再現し、問題を文書化するというデバッグ作業の最初の部分が終了しました。次のパートでは、この異常な動作の原因を理解するために、これらのコンポーネントの内部動作を詳しく掘り下げていきます。そうすることで、将来同様のバグを修正し、開発者として成長するのに役立つ洞察を得ることができればと思っています。

パート 2 をお楽しみに: バグが発生する理由を理解する

以上が厄介なバグの修正 (モーダルの理解) - パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。