Javascript 如何将参数传递给使用array.map()创建的组件中的onClick处理程序函数

我一直在做一个可以用来存储集合的Web应用程序，有一个仪表板页面，用户可以看到的所有集合都显示在一个表格中，其中每一行都是一个集合，列用于显示集合名称和一个删除按钮.

这是集合体Row.tsx文件:

"use client";

import React from "react";
import { useSession } from "next-auth/react";

type TableRow = {
  id: string;
  name: string;
};

type Props = {
  row: TableRow;
  className?: string;
};

const DEFAULT_ROW: TableRow = {
  id: "0",
  name: "Collection",
};

const CollectionRow = ({ row = DEFAULT_ROW, className }: Props) => {


  const handleDeleteCollection = async () => {
    console.log(row.id);
  };

  return (
    <tr key={row.id}>
      <td className={className}>
        <div className="flex flex-col">
          <p className="text-sm">{row.name}</p>
        </div>
      </td>
      <td className={className}>
        <button
          onClick={() => (document.getElementById("delete") as any).showModal()}
          className="btn btn-primary btn-sm"
        >
        </button>
        <dialog id="delete" className="modal">
          <div className="modal-box">
            <h3 className="font-bold text-lg">Delete Collection?</h3>
            <div className="modal-action">
              <form method="dialog">
                <button className="btn btn-primary">Close</button>
              </form>
              <button onClick={handleDeleteCollection}>
                Delete
              </button>
            </div>
          </div>
        </dialog>
      </td>
    </tr>
  );
};

export default CollectionRow;

下面是使用该组件的Page.tsx:

import React from "react";

import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth_options";
import CollectionRow from "@/components/collectionRow";
import AddCollection from "@/components/addCollection";

const TABLE_HEAD = [
  "Name",
  "Delete",
];

type TableRow = {
  id: string;
  name: string;
};

export default async function page() {
  
  // Api request to fetch all rows

  const tableRows: TableRow[] = (await res.json()) || [];

  return (
    <div>
      <div className="h-full w-full bg-base-200">
        <div className="px-0 overflow-auto ">
          <table className="mt-2 w-full min-w-max table-auto text-left">
            <thead>
              <tr>
                {TABLE_HEAD.map((head, index) => (
                  <th
                    key={head}
                    className="cursor-pointer border-y border-primary p-4"
                  >
                    <p className="text-sm flex items-center justify-between gap-2">
                      {head} {index !== TABLE_HEAD.length - 1}
                    </p>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {tableRows.map((row: TableRow, index) => {
                const isLast = index === tableRows.length - 1;
                const classes = isLast ? "p-4" : "p-4 border-b border-primary ";

                return (
                  <CollectionRow key={index} row={row} className={classes} />
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

我的问题是，在handleDeleteCollection中，我记录row.id，但是出于某种原因，无论按钮来自哪一行，我得到的id总是第一行的那一行.我想使用该ID删除该行，但我就是无法获得它.

我试着用这种方式编辑Collection tionRow.tsx:

"use client";

import React from "react";
import { useSession } from "next-auth/react";

type TableRow = {
  id: string;
  name: string;
};

type Props = {
  row: TableRow;
  className?: string;
};

const DEFAULT_ROW: TableRow = {
  id: "0",
  name: "Collection",
};

const CollectionRow = ({ row = DEFAULT_ROW, className }: Props) => {


  const handleDeleteCollection = async (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    console.log(e.target);
  };

  return (
    <tr key={row.id}>
      <td className={className}>
        <div className="flex flex-col">
          <p className="text-sm">{row.name}</p>
        </div>
      </td>
      <td className={className}>
        <button
          onClick={() => (document.getElementById("delete") as any).showModal()}
          className="btn btn-primary btn-sm"
        >
        </button>
        <dialog id="delete" className="modal">
          <div className="modal-box">
            <h3 className="font-bold text-lg">Delete Collection?</h3>
            <div className="modal-action">
              <form method="dialog">
                <button className="btn btn-primary">Close</button>
              </form>
              <button onClick={handleDeleteCollection} id={row.id}>
                Delete
              </button>
            </div>
          </div>
        </dialog>
      </td>
    </tr>
  );
};

export default CollectionRow;

要记录所有按钮信息，包括id，它仍然是第一行的id.

奇怪的是，所有其他信息(我只是为了保持代码整洁才放入名称，但我的代码中还有更多信息)都正确显示，唯一有问题的是id.我也试着在Page.tsx中打印它，但在那里它似乎是正确的.我不知道我做错了什么. 有谁能帮帮我吗？谢谢