为什么我的 React 函数没有等待 SweetAlert 确认？

问题描述

我试图让 swalDelete 函数等待来自 SweetAlert 的响应，但我在单击“删除”按钮后立即获得“doDelete”日志。如何让日志等待响应？我做错了什么？

Locations.js

async function swalDelete(value,canDelete){
    let doDelete = await Delete(locationInUseFxn(),canDelete,value);
    // doDelete gets logged right after clicking the delete button.
    console.log('doDelete',doDelete); 
};

<Button
    onClick={() => swalDelete(rowData,canDelete)}>Delete</Button>

删除.js

export const Delete = (inUse,value) => {
...
    Swal.fire({
        title: 'Delete record?',text: 'This action cannot be undone.',icon: 'question',confirmButtonText: 'Delete',confirmButtonColor: '#DC004E',showCancelButton: true,cancelButtonText: 'Cancel',reverseButtons: true,focusConfirm: false,focusCancel: false,scrollbarPadding: false
    }).then((result) => {
        return result.isConfirmed;
    })
};

解决方法

从 Delete 返回 Promise 以便等待它。如果没有这个，您的代码只是在等待非异步 Delete 函数的 void 返回（即 Delete 未声明为 async，因此它不会隐式返回 Promise）。>

export const Delete = (inUse,canDelete,value) => {
  ...
  return Swal.fire({ // <-- return Promise
    title: 'Delete record?',text: 'This action cannot be undone.',icon: 'question',confirmButtonText: 'Delete',confirmButtonColor: '#DC004E',showCancelButton: true,cancelButtonText: 'Cancel',reverseButtons: true,focusConfirm: false,focusCancel: false,scrollbarPadding: false
  }).then((result) => {
    return result.isConfirmed;
  });
};