Next.js传递Props给DaisyUI模态框时始终显示第一条记录

问题根源 #

1. 重复ID冲突：所有BookingEditModal组件的模态框都用了同一个id="editBookingModal"，调用document.getElementById时只会找到页面中第一个匹配的模态框，导致不管点哪个按钮，都是第一个模态框弹出。
2. 冗余状态的异步问题：你用useState存selectedBooking，但setState是异步的，console.log打印的其实是更新前的旧值；而且完全不需要额外维护状态——props传入的booking已经是当前记录的正确数据。

修复后的代码 #

"use client";
import { useRef } from 'react';

interface Props {
  booking: { id: number; name: string; [key: string]: any }; // 明确booking类型，至少包含唯一标识id和名称name
}

const BookingEditModal = ({ booking }: Props) => {
  // 用ref绑定当前组件的模态框DOM元素，彻底避免ID冲突
  const modalRef = useRef<HTMLDialogElement>(null);

  const openModal = () => {
    modalRef.current?.showModal();
    // 直接打印props传入的booking，确保拿到当前记录的正确数据
    console.log(booking);
  };

  return (
    <>
      <button className="btn btn-error" onClick={openModal}>
        Update
      </button>
      {/* 移除固定ID，通过ref绑定当前组件的模态框 */}
      <dialog ref={modalRef} className="modal">
        <div className="modal-box">
          {/* 直接使用props的booking渲染内容，无需状态中转 */}
          <h3 className="font-bold text-lg">{booking.name}</h3>
          <div className="modal-action">
            <form method="dialog">
              <button className="btn">Close</button>
            </form>
          </div>
        </div>
      </dialog>
    </>
  );
};

export default BookingEditModal;

关键修改说明 #

• 用useRef替代ID查询：每个组件实例的modalRef只绑定自己的模态框，彻底解决ID冲突问题，符合React组件化开发的最佳实践。
• 移除冗余状态：直接使用props传入的booking渲染模态框内容，避免异步状态更新带来的不一致问题。
• 简化逻辑：去掉不必要的async标记（此处无异步操作），代码更简洁直观。

内容的提问来源于stack exchange，提问作者user10980228