React Material-Table通过表格操作调用DeletePrompt模态框不生效问题咨询

你目前的写法存在3个关键错误：

• Material Table的onClick是事件回调函数，你在回调中返回的<DeletePrompt />组件不会被插入到React的DOM渲染树中，自然不会生效
• 你在DeletePrompt组件的顶层渲染逻辑中直接调用handleClickOpen()触发状态更新，属于React渲染流程的违规写法，轻则导致重复渲染，严重时会触发死循环
• 弹窗的显隐状态没有和删除按钮的点击动作建立正确的数据流关联

第一步：改造DeletePrompt为受控组件 #

将弹窗的显隐状态交给父组件控制，删除组件内部的状态判断逻辑，修改后代码如下：

// DeletePrompt.jsx
export default function DeletePrompt(props) {
  const { content, data_id, open, onClose, onConfirm } = props;

  const handleDelete = () => {
    // 执行实际删除逻辑
    onConfirm?.(data_id);
    onClose();
  };

  return (
    <div>
      <Dialog
        open={open}
        onClose={onClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {"Are you sure to Delete?"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            { content }
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose}>Cancel</Button>
          <Button onClick={handleDelete} autoFocus>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

第二步：修改父组件逻辑 #

在使用Material Table的父组件中维护弹窗状态，将DeletePrompt放在父组件的JSX渲染树中：

// 父组件代码
import DeletePrompt from './DeletePrompt';

// 父组件内部新增状态
const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
const [curDeleteRow, setCurDeleteRow] = React.useState(null);

// 处理实际删除逻辑的方法
const handleDeleteConfirm = (dataId) => {
  // 此处调用删除接口、更新表格数据等操作
  console.log('要删除的数据ID：', dataId);
};

// Material Table配置修改
<MaterialTable
  icons={tableIcons}
  title={title}
  columns={columns}
  data={data}        
  actions={[
    {
      icon: () => <Edit />,
      tooltip: 'Edit',
      onClick: (event, rowData) => {
        // 编辑逻辑
      }
    },
    {
      icon: () => <Delete />,
      tooltip: 'Delete',
      onClick: (event, rowData) => {
        // 点击删除按钮只更新状态，唤起弹窗
        setCurDeleteRow(rowData);
        setDeleteModalOpen(true);
      }
    }
  ]}
  options={{
    actionsColumnIndex: -1,
    exportButton: true,
    headerStyle: {
      fontWeight: "bold"
    }
  }}
/>
{/* 弹窗组件放在渲染树中，和Material Table同级 */}
<DeletePrompt
  open={deleteModalOpen}
  onClose={() => {
    setDeleteModalOpen(false);
    setCurDeleteRow(null);
  }}
  content={`确定要删除数据「${curDeleteRow?.title || ''}」吗？`}
  data_id={curDeleteRow?.id}
  onConfirm={handleDeleteConfirm}
/>

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