Ant Design Table点击单条删除按钮触发所有行Popconfirm弹出如何解决

所有行的删除Popconfirm组件都绑定了同一个全局的visible布尔状态，只要这个状态被设为true，所有行的Popconfirm都会触发显示，因此点击任意一行的删除按钮都会同时弹出所有行的确认框。

方案1：不手动控制visible（无特殊需求推荐使用） #

Ant Design的Popconfirm默认自带点击触发、点击确认/取消关闭的交互逻辑，不需要你手动维护visible状态，直接删除Popconfirm上的visible属性即可：

1. 移除原来的onDelete函数、visible状态定义
2. 操作列返回的Popconfirm代码修改为：

<Popconfirm
    title="Are you sure to delete this item?"
    onConfirm={handleOk}
    onCancel={handleCancel}
>
    <Icondescription icon={<DeleteOutlined />} />
</Popconfirm>

方案2：需手动控制visible的场景（比如弹出前要做前置校验） #

将原来布尔类型的visible状态修改为存储当前待删除的行ID，只有当前行ID与存储的ID一致时才显示确认框：

1. 修改状态定义：

// 替换原来的const [visible, setVisible] = useState(false)
const [activeDeleteId, setActiveDeleteId] = useState(null)

2. 修改删除触发、确认、取消逻辑：

const onDelete = (recordId) => {
    // 触发弹窗时存储当前点击的行ID
    setActiveDeleteId(recordId)
}

const handleOk = async (recordId) => {
    const response = await props.callExpertiseApiDel(recordId)
    if (response.status === 200) {
        setActiveDeleteId(null)
        await props.callExpertiseApi();
    }
};

const handleCancel = () => {
    setActiveDeleteId(null);
    setAddRecordData({})
}

3. 操作列返回的Popconfirm代码修改为：

<Popconfirm
    title="Are you sure to delete this item?"
    visible={activeDeleteId === record.id}
    onConfirm={() => handleOk(record.id)}
    onCancel={handleCancel}
>
    <Icondescription icon={<DeleteOutlined />} btnClick={() => onDelete(record.id)} />
</Popconfirm>

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