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

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

您的replaceImageAlert 方法只是等待 promise ，但它不会对结果值做任何事情，也不会返回 任何东西。你会想要使用

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.