for循环中的模态确认Promise反应

Question

I am trying to solve this problem but i am hitting a wall now.

https://codepen.io/trinhdh/pen/ZEKJqXO

So, i do have an array and just want to console.log each item of in the array. However, if an item === 1 then a confirmation modal will pop-up and ask again to print it out. If you see the console.

The problem is 'delete 2' and 'delete 3' is print out first. I would like to have it wait until i confirmed the modal box from 1.

Expected output 'delete 1' -> 'delete 2' -> 'delete 3' . How can i make 'delete 2' and 'delete 3' wait for the first one.

I have tried to put it in new Promise() but its still not working. I really need a suggestion.

Thank you

/* I am getting close */

const {  Modal, Button, Space  } = antd;
const {  ExclamationCircleOutlined  } = icons;
const axios = require('axios');

class LocalizedModal extends React.Component {
    state = {input: [1,2,3]}
  
    handleModalConfirm(i) {
      return await axios.get('http://webcode.me').then(res => {
        res.data = 1 /* I am just faking the res.data = 1.*/

        if (res.data === 1) {
          const a = new Promise((res, rej) => {
            Modal.confirm({
              title: "Confirm",
              content: "Are you sure you want to delete " + i,
              icon: <ExclamationCircleOutlined />,
              okText: "Yes",
              cancelText: "No",
              onOk: () => {
                console.log("delete " + i);
                res();
              },
              onCancel: () => {
                rej();
              }
            });
          });
          await a;
        } else {
          console.log("delete " + i);
        }
      })
    }
  
    handleConfirmDelete = async (input) => {
    return new Promise(async (resolve, reject) => {
      for (const i of input) {
        this.handleModalConfirm(i)
      }
      resolve();
    }).catch((e) => console.log(e));
  };

  handleDelete = () => {
    Modal.confirm({
      title: 'Confirm', 
      icon: <ExclamationCircleOutlined />,
      content: 'Are you sure you want to delete this ?',
      okText: 'Yes',
      cancelText: 'No',
      onOk: () => {
         this.handleConfirmDelete(this.state.input)
    }
    });
  }
  

   render() {
    return (
      <>
        <Button onClick={() => this.handleDelete()}>Delete All</Button>
      </>
    );
  }
}


ReactDOM.render(
  <Space>
    <LocalizedModal />
  </Space>,
  mountNode,
);

Answer 1

The onOk in your modal needs to be blocking, meaning that you have to have JS stop the processing of the loop. However, there's no way to pause the processing of the loop due to the Modal being a "non-blocking" element. Therefore, instead of using a forEach loop, write a recursive function and call the function again within the onOk prop.

  parseAndWait = arr => {
    const arrCopy = [...arr]
    const ele = arrCopy.shift()
    if (ele === 1) {
      Modal.confirm({
        title: "Confirm",
        icon: <ExclamationCircleOutlined />,
        content: "Are you sure you want to delete " + ele,
        okText: "Yes",
        cancelText: "No",
        onOk: () => {
          // process the remaining elements of the array only
          // after the user has clicked ok
          console.log("delete " + ele);
          if (arrCopy.length > 0) {
            this.parseAndWait(arrCopy);
          }
        }
      })
    } else {
      console.log("delete " + ele);
      if (arrCopy.length > 0) {
        this.parseAndWait(arrCopy);
      }
    }
  }
  
  handleConfirmDelete = (input) => {
    this.parseAndWait(input)
  }

Answer 2

Just use for (const i of input) as foreach does not work with async and use a promise and await with async method.

const {  Modal, Button, Space  } = antd;
const {  ExclamationCircleOutlined  } = icons;

class LocalizedModal extends React.Component {
  state = {input: [1,2,3]}
 
  handleConfirmDelete = async (input) => {
    return new Promise(async (resolve, reject) => {
      for (const i of input) {
        if (i === 1) {
          const a = new Promise((res, rej) => {
            Modal.confirm({
              title: "Confirm",
              content: "Are you sure you want to delete " + i,
              icon: <ExclamationCircleOutlined />,
              okText: "Yes",
              cancelText: "No",
              onOk: () => {
                console.log("delete " + i);
                res();
              },
              onCancel: () => {
                rej();
              }
            });
          });
          await a;
        } else {
          console.log("delete " + i);
        }
      }
      resolve();
    }).catch((e) => console.log(e));
  };
  
  handleDelete = () => {
    Modal.confirm({
      title: 'Confirm', 
      icon: <ExclamationCircleOutlined />,
      content: 'Are you sure you want to delete this ?',
      okText: 'Yes',
      cancelText: 'No',
      onOk: () => {
         this.handleConfirmDelete(this.state.input)
    }
    });
  }
  

   render() {
    return (
      <>
        <Button onClick={() => this.handleDelete()}>Delete All</Button>
      </>
    );
  }
}


ReactDOM.render(
  <Space>
    <LocalizedModal />
  </Space>,
  mountNode,
);