Question

问题：

我正在使用“ react-dropzone”上传文件，如果图像名称已存在，则使用“ react-confirm-alert”显示确认警报。我必须验证映像名称重复并循环显示确认，但它只能运行一次。

需要：

我必须循环显示确认警报。

问题：

在此示例中，我使用async / await循环显示确认。它在循环中显示，但是来自replaceImageAlert（）的数据未定义。请提出更好的地方或更好的解决方案此示例与window.confirm（）配合良好，但我必须使用自定义确认框。

...
async replaceImageAlert(index, fileObject){
  await new Promise(function (resolve, reject) {
    confirmAlert({
      title: 'Confirm to update old image',
      message: 'Are you sure to do this.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => {
            resolve(true);
          }
        },
        {
          label: 'No',
          onClick: () => {
             resolve(false);
          }
        }
      ]
    });
  });
}
...
async function abc(){
  for (var i =0; i < accepted.length; i++){
    var chechAndRemoveDuplicate =  HF.removeDuplicateImage(accepted[i], this.props.files);
    if (chechAndRemoveDuplicate.duplicate){
      var temp = accepted[i];
      var cb = await this.replaceImageAlert(i, temp);
      console.log('cb', cb);
    }else {
      generateFile(i, accepted[i]).then((value)=>{
          this.props.setResourceFile(value.fileObject); //add file data to file aray
      });
    }

  }
}

Answer 1

await关键字应在async函数内部使用。要解决您的问题，您需要将函数声明为：

function replaceImageAlert() {
    return new Promise(/* ... */);
}

async function abc() {
    // some code
    await replaceImageAlert();
}

Answer 2

您的replaceImageAlert方法仅等待promise，但对结果值不做任何事情，也不对return做任何事。您将要使用

replaceImageAlert(index, fileObject){
  return new Promise(function (resolve, reject) {
//^^^^^^
    confirmAlert({
      title: 'Confirm to update old image',
      message: 'Are you sure to do this.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => resolve(true)
        },
        {
          label: 'No',
          onClick: () => resolve(false)
        }
      ]
    });
  });
}

因此，当您执行const x = await replaceImageAlert(…)时，x实际上将是false或true。

如何在循环中显示React JS的自定义确认警报？

2 个答案: