转换 $.Deferred() 以做出反应答案

【问题标题】：converting $.Deferred() to react转换 $.Deferred() 以做出反应
【发布时间】：2022-01-14 06:47:04
【问题描述】：

我正在使用 DevExtreme React 组件包，但遇到了一个问题，即文档仅涵盖 jQuery，我不确定如何在 React 中实现此功能。

这是他们文档 (https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxList/Configuration/#onItemDeleting) 中的示例：

    onItemDeleting: function(e) {
        const d = $.Deferred();
        DevExpress.ui.dialog.confirm("Do you really want to delete the item?")
            .done(function(value) { 
                d.resolve(!value);
            })
            .fail(d.reject);
        e.cancel = d.promise();
    }

这就是我尝试转换为 React 的方式。

我的删除功能：

async function deleteTemplate(e)
{
    console.log(e);
    let del = await confirm("Are you sure you want to delete this template?", "Delete");
    if(del === false) {
        e.cancel = true;
        return;
    }
    console.log("delete");
 }

我将它绑定到这个组件：

<List
    dataSource={templateList}
    displayExpr="templateName"
    height={400}
    allowItemDeleting={true}
    onItemDeleting={deleteTemplate}
>
</List>

问题是，如果我不立即设置e.cancel = true，那么它不会取消并且项目会被删除。

例如这将取消：

async function deleteTemplate(e)
{
    e.cancel = true;
 }

但如果我使用对话方法，那么它不会。执行任何幕后删除功能都不会等待我的方法完成。

我尝试了多种方法来阻止执行，但无法让它工作，它总是在可以设置取消之前立即删除。

我的目标是做到这一点，如果用户点击删除它只会在他们选择是时删除。这是文档中的示例为 jQuery 显示的内容，但它在 React 中不起作用。

我错过了什么吗？

【问题讨论】：

标签： javascript reactjs typescript devextreme

【解决方案1】：

看起来 jQuery 示例设置了取消承诺。如果你也这样做会怎样？

function deleteTemplate(e) {
    e.cancel = confirm(...).then(del => !del)
}

在您的代码中，e.cancel 属性直到确认调用解析后才会设置，而在 jQuery 示例中，e.cancel 属性会立即设置，然后稍后再解析。我假设列表组件旨在等待传入的取消承诺解决，但不等待 onDeleteItem 处理程序本身。

【讨论】：