如何将Ant Design Table行数据传递到Modal并在确认操作时使用

AI 小北

2026-9-30

排查步骤

先校验传入的原始数据是否正常
在showModal方法内添加打印逻辑，确认触发点击时拿到的record不是空值：

const showModal = (record) => {
    console.log('接收的行数据：', record)
    setModalTaskId(record);
    setVisible(true);
};

如果此处打印为空，检查Table组件的dataSource配置、行数据映射逻辑即可。

解决方法

如果showModal拿到的record正常，可通过以下两种方式修复取值为空的问题：

方式1：直接传参调用，避开状态依赖

修改Modal的onOk回调，直接将当前状态里的modalTaskId作为参数传入handleOk，无需在handleOk内部依赖状态取值：

// Modal组件修改
<Modal
    visible={visible}
    onOk={() =>{handleOk(modalTaskId)}}
    confirmLoading={confirmLoading}
    onCancel={handleCancel}
>
    <p>{modalText}</p>
</Modal>

对应修改handleOk接收参数：

const handleOk = async (taskId) => {
    console.log('modalTaskId: ', taskId)
    // 后续删除逻辑直接使用taskId即可
}

方式2：修正状态清空的时机

如果你的handleCancel或者确认逻辑执行完后会清空modalTaskId，不要和关闭弹窗的操作同步执行，避免状态更新优先级导致取值异常：

// 错误的清空逻辑
const handleCancel = () => {
    setModalTaskId(undefined)
    setVisible(false)
}

// 正确的清空逻辑，等弹窗关闭后再清空状态
const handleCancel = () => {
    setVisible(false)
    // 延迟清空，适配Ant Design Modal的关闭动画时长
    setTimeout(() => setModalTaskId(undefined), 300)
}

// handleOk执行完业务逻辑后再清空状态
const handleOk = async () => {
    console.log('modalTaskId: ', modalTaskId)
    // 执行删除请求等业务逻辑
    await deleteApi(modalTaskId)
    setVisible(false)
    setModalTaskId(undefined)
}