使用antd的Modal组件时屏幕黑屏，仅表格行数较多时触发该问题

你遇到的异常是Antd Table配合Modal做行删除操作时的典型问题，根源有两个：

• 所有表格行共用同一个布尔类型的模态框显示状态，没有存储当前点击行的唯一标识，行数较多时很容易出现作用域污染，拿到错误的行id
• Modal没有配置销毁重置属性，多次打开关闭后遗留的DOM节点会在表格内容较长时出现定位/交互异常

代码修复步骤 #

1. 调整状态定义 #

把原来仅存布尔值的状态改成同时存显示状态和当前选中的行id：

import { Modal, Button } from "antd";
import { DeleteFilled } from '@ant-design/icons';
// 调整状态结构：[显示状态, 当前选中的待删除id]
const [deleteModalState, setDeleteModalState] = useState({
  visible: false,
  activeId: null
});

2. 修改交互逻辑 #

点击删除按钮时把当前行的id存入状态，确认删除时直接从状态读取id即可，避免行作用域的闭包问题：

// record是表格行插槽传入的当前行数据
const showDeleteModal = (record) => {
  setDeleteModalState({
    visible: true,
    activeId: record.id
  })
}

const handleOk = () => {
  store.dispatch(deleteProductList(deleteModalState.activeId));
  setDeleteModalState({ visible: false, activeId: null });
};

const handleCancel = () => {
  setDeleteModalState({ visible: false, activeId: null });
};

3. 调整组件配置 #

给Modal加上destroyOnClose属性，关闭后自动销毁节点，避免长列表下的残留节点异常：

<Button
  icon={<DeleteFilled />}
  style={{
    backgroundColor: "#D15B47",
    color: "#ffffff",
  }}
  onClick={() => showDeleteModal(record)}
>
 删除
</Button>
<Modal
  title="确认删除"
  visible={deleteModalState.visible}
  onOk={handleOk}
  onCancel={handleCancel}
  destroyOnClose // 关键配置：关闭后销毁模态框节点
>
  <p>你确定要删除该车辆吗？</p>
</Modal>

如果还是出现模态框定位偏移的问题，可以额外给Modal加centered属性让它始终垂直居中显示。

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