Ant Design Upload组件删除异常：元素先于确认弹窗消失

问题根源 #

你的代码里已经通过返回Promise来阻止Antd Upload自动删除文件，但弹窗的确认/取消按钮没有正确关联Promise的resolve逻辑，同时存在冗余状态导致弹窗控制混乱，所以出现了弹窗还没弹出就删除元素的问题。

具体修复步骤 #

1. 删除冗余状态，统一弹窗控制 #

去掉无用的deleteVisible状态，只用visibleModal来控制确认弹窗的显示/隐藏。

2. 修复确认按钮的逻辑 #

让确认按钮正确触发Promise的resolve，并关闭弹窗：

const onDeleteHandle = () => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(true); // 确认删除，resolve为true
    setVisibleModal(false);
  }
};

3. 修复取消按钮的逻辑 #

取消按钮需要resolve为false，并关闭弹窗：

const deletehandleCancel = () => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(false); // 取消删除，resolve为false
    setVisibleModal(false);
  }
};

4. 修正handleCancelModalRemove的逻辑 #

确保弹窗取消时正确处理Promise并关闭弹窗：

const handleCancelModalRemove = useCallback(() => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(false);
    setVisibleModal(false);
  }
}, []); // 去掉不必要的依赖`removePromise`

5. 完善handleRemove的参数接收 #

Antd Upload的onRemove会传入file和fileList参数，保留这些参数方便后续业务处理（比如记录要删除的文件）：

const handleRemove = useCallback((file: UploadFile, fileList: UploadFile[]) => {
  const promise = new Promise<boolean>(resolve => {
    resolvePromiseRef.current = resolve;
  });
  setVisibleModal(true);
  return promise;
}, []);

6. 确保BasicModal的按钮绑定正确 #

确认你的BasicModal组件正确调用了handleOk和handleCancel，如果组件内部有默认的确认/取消逻辑，需要确保它会触发传入的handleOk和handleCancel回调。

完整修改后的核心代码片段 #

// 状态清理，只保留必要的
const [visibleModal, setVisibleModal] = useState(false);
const resolvePromiseRef = useRef<((value: boolean) => void) | undefined>();

const onDeleteHandle = () => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(true);
    setVisibleModal(false);
  }
};

const deletehandleCancel = () => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(false);
    setVisibleModal(false);
  }
};

const handleRemove = useCallback((file: UploadFile, fileList: UploadFile[]) => {
  const promise = new Promise<boolean>(resolve => {
    resolvePromiseRef.current = resolve;
  });
  setVisibleModal(true);
  return promise;
}, []);

const handleCancelModalRemove = useCallback(() => {
  if (resolvePromiseRef.current) {
    resolvePromiseRef.current(false);
    setVisibleModal(false);
  }
}, []);

原理说明 #

Antd Upload组件的onRemove方法如果返回一个Promise，会等待Promise resolve后才执行删除操作：

• 当resolve为true时，组件会删除对应的文件
• 当resolve为false时，组件会取消删除操作

通过这个机制，我们可以在弹窗确认后再决定是否删除文件，从而解决弹窗未弹出就删除的问题。

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