Material UI追加列表弹窗仅首个按钮生效，需实现每次点击弹出新弹窗

嘿，这个问题我太熟了！你遇到的核心问题是所有列表按钮都在操作同一个<dialog>元素——第一个按钮点击后，这个弹窗已经加上了open属性处于打开状态，浏览器不允许重复调用showModal()打开已经处于模态状态的对话框，所以就抛出了你看到的那个错误。

咱们分两种场景来解决，优先推荐用Material UI原生的Dialog组件，毕竟更贴合你的技术栈：

方案1：用Material UI Dialog + 独立状态管理（最推荐） #

给每个列表项分配专属的弹窗组件，用状态对象单独控制每个弹窗的显示/隐藏，这样就不会互相干扰了。代码示例如下：

import { useState } from 'react';
import { Dialog, DialogTitle, DialogContent, Button, List, ListItem } from '@mui/material';

const OrderList = () => {
  // 替换成你的实际订单数据
  const orders = [
    { id: 1, title: "订单#001", content: "这是第一个订单的详情" },
    { id: 2, title: "订单#002", content: "这是第二个订单的详情" },
    // ...更多订单
  ];

  // 用对象存储每个订单的弹窗状态，key是订单ID
  const [openDialogs, setOpenDialogs] = useState({});

  // 打开指定订单的弹窗
  const openDialog = (orderId) => {
    setOpenDialogs(prev => ({ ...prev, [orderId]: true }));
  };

  // 关闭指定订单的弹窗
  const closeDialog = (orderId) => {
    setOpenDialogs(prev => ({ ...prev, [orderId]: false }));
  };

  return (
    <List id="order">
      {orders.map(order => (
        <ListItem key={order.id} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{order.title}</span>
          <Button variant="contained" onClick={() => openDialog(order.id)}>
            查看详情
          </Button>

          {/* 每个订单对应独立的Dialog */}
          <Dialog
            open={!!openDialogs[order.id]}
            onClose={() => closeDialog(order.id)}
            maxWidth="sm"
            fullWidth
          >
            <DialogTitle>{order.title}</DialogTitle>
            <DialogContent>{order.content}</DialogContent>
          </Dialog>
        </ListItem>
      ))}
    </List>
  );
};

export default OrderList;

这个方案的好处是每个弹窗完全独立，你甚至可以同时打开多个弹窗（如果业务需要的话），而且完全遵循Material UI的组件规范，维护起来更省心。

方案2：如果坚持用原生<dialog>元素 #

要是你因为某些原因必须用原生dialog，那有两种处理方式：

方式A：给每个按钮配专属的原生dialog #

直接为每个列表项生成独立的dialog元素，避免复用冲突：

import { List, ListItem, Button } from '@mui/material';

const OrderList = () => {
  const orders = [/* 你的订单数据 */];

  return (
    <div id="order">
      {orders.map(order => (
        <ListItem key={order.id} sx={{ mb: 2 }}>
          <span>{order.title}</span>
          <Button 
            variant="contained" 
            onClick={() => document.getElementById(`order-dialog-${order.id}`).showModal()}
          >
            查看详情
          </Button>

          <dialog id={`order-dialog-${order.id}`} style={{ width: '40%' }}>
            <h3>{order.title}</h3>
            <p>{order.content}</p>
            <button onClick={() => document.getElementById(`order-dialog-${order.id}`).close()}>
              关闭
            </button>
          </dialog>
        </ListItem>
      ))}
    </div>
  );
};

方式B：复用同一个dialog，但先关闭再打开（不推荐） #

这种方式适合不需要同时打开多个弹窗的场景，但会有轻微的闪烁感：

import { useRef } from 'react';
import { List, ListItem, Button } from '@mui/material';

const OrderList = () => {
  const orders = [/* 你的订单数据 */];
  const dialogRef = useRef(null);
  const dialogContentRef = useRef(null);

  const openDialog = (order) => {
    // 先关闭已打开的弹窗
    if (dialogRef.current?.open) {
      dialogRef.current.close();
    }
    // 更新弹窗内容
    dialogContentRef.current.innerHTML = `<h3>${order.title}</h3><p>${order.content}</p>`;
    // 重新打开弹窗
    dialogRef.current.showModal();
  };

  return (
    <div id="order">
      {orders.map(order => (
        <ListItem key={order.id} sx={{ mb: 2 }}>
          <span>{order.title}</span>
          <Button variant="contained" onClick={() => openDialog(order)}>
            查看详情
          </Button>
        </ListItem>
      ))}

      <dialog ref={dialogRef} style={{ width: '40%' }}>
        <div ref={dialogContentRef}></div>
        <button onClick={() => dialogRef.current.close()}>关闭</button>
      </dialog>
    </div>
  );
};

最后再啰嗦两句 #

你原来的代码之所以出问题，本质是所有按钮都绑定了同一个dialog实例。第一个点击后dialog处于open状态，浏览器的模态对话框规则不允许重复打开，所以就报错了。优先选方案1，既符合MUI的生态，也能避免很多奇怪的兼容性问题～

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