仅在 API 完成后关闭模式

Question

我正在学习ReactJS。
我正在显示一个弹出模式，通过 API 调用在帐户列表中添加一个新帐户。

{newExpendixAccount && (
            <ConfirmDialog
              title="Create New Expendix Account"
              children={<ModalContent action="new" />}
              open={newExpendixAccount}
              setOpen={setNewExpendixAccount}
              onConfirm={newAccount}
              isLoading={false}
              onClose={() => {}}
            />
          )}

正如您在上面的代码中看到的，如果 newExpendixAccount === true 那么它将显示如下图所示的模态弹出窗口：

现在，如果我在输入中输入内容并按 YES 按钮，那么 onConfirm={newAccount} 将运行。

下面给出的是 newAccount 函数：

  const newAccount = () => {
    const data = {
      PKID: 0,
      AccountName: accountInputValue.username,
    };
    createOrUpdateAccount(data, (res) => { // calling API and getting response
      if (res?.data?.Success === true && res?.status === 200) {
        NotificationManager.success(res?.data?.ErrorMessage);
        setAccountData((prevState) => ({
          ...prevState,
          usersAccountData: [...prevState.usersAccountData, res.data.Model],
        }));
        return true;
      } else {
        NotificationManager.error(res.message || res?.data?.ErrorMessage);
        return false;
      }
    });
  };

下面给出的是 ConfirmDialog 组件：

const ConfirmDialog = ({
  title,
  children,
  open,
  setOpen,
  onConfirm,
  isLoading,
  onClose,
}) => {
  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      aria-labelledby='confirm-dialog'
    >
      <DialogTitle id='confirm-dialog'>{title}</DialogTitle>
      {isLoading && <LinearProgress></LinearProgress>}
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button
          variant='contained'
          onClick={() => {
            setOpen(false);
            onClose();
          }}
          color='secondary'
        >
          No
        </Button>
        <Button
          variant='contained'
          onClick={() => {
            setOpen(false);
            onConfirm();
          }}
          disabled={isLoading}
          color='primary'
        >
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
};
export default ConfirmDialog;

请查看 YES button 的方法 onClick :

        <Button
          variant='contained'
          onClick={() => {
            setOpen(false);
            onConfirm();
          }}
          disabled={isLoading}
          color='primary'
        >
          Yes
        </Button>

问题出在 `onClick` 函数中。

每当我按下 YES 按钮时，它首先通过运行ning setOpen(false) 关闭模态弹出窗口，然后调用 API 函数 onConfirm() 我作为道具发送。

我希望仅在API请求完成后关闭弹出模式。
我该怎么做？

Answer 1

我能想到的一种方法是，将 onClick() 函数设为异步，并等待 onConfirm() 完成（为此，您需要将 newAccount() 修改为 return 一个承诺一旦 API 调用完成，它将解决）

//this is how it should look like
onClick = {
  async () => {
    await onConfirm();
    setOpen(false);
  }
}

Answer 2

您可以更新您的函数以接受一个函数，该函数将在 api 调用完成后调用它。

  const newAccount = (onFinish = () => {}) => {
    const data = {
      PKID: 0,
      AccountName: accountInputValue.username,
    };
    createOrUpdateAccount(data, (res) => { // calling API and getting response
      if (res?.data?.Success === true && res?.status === 200) {
        NotificationManager.success(res?.data?.ErrorMessage);
        setAccountData((prevState) => ({
          ...prevState,
          usersAccountData: [...prevState.usersAccountData, res.data.Model],
        }));
        return true;
      } else {
        NotificationManager.error(res.message || res?.data?.ErrorMessage);
        return false;
      }
      onFinish();
    });
  };

然后做：

onClick={() => {
    onConfirm(() => {setOpen(false)});
}}

仅在 API 完成后关闭模式

Close modal only after API finishes

javascript

api

modal-dialog

reactjs

问题出在 `onClick` 函数中。

仅在 API 完成后关闭模式

Close modal only after API finishes

javascript

api

modal-dialog

reactjs

问题出在 onClick 函数中。

问题出在 `onClick` 函数中。