React Zustand确认对话框无法获取用户拒绝返回值求助

刚接触Zustand，我实现了一个确认对话框，基础功能可用，但无法获取用户拒绝对话框时的返回值，不知道问题出在哪。

当前调用代码：

confirmDialog("Are you sure?", (userAccepted) => {                  
  replace(userAccepted)
})
// 用户拒绝对话框时无法执行代码，confirmDialog返回void
function replace(userAccepted: boolean) {
 ...
}

我的Store代码：

import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, IconButton, Alert } from "@pankod/refine-mui"

import create from "zustand"

type ConfirmDialogStore = {
   message: string
   onSubmit?: (userAccepted: boolean) => void
   close: () => void
}

const useConfirmDialogStore = create<ConfirmDialogStore>((set) => ({
   // 状态及默认值
   message: "",
   onSubmit: undefined,
   // 通过close方法更新状态
   close: () => set({ onSubmit: undefined }),
}))

export const confirmDialog = (message: string, onSubmit: (userAccepted: boolean) => void) => {
   // 更新Store
   useConfirmDialogStore.setState({
      message,
      onSubmit,
   })
}

const ConfirmDialog = () => {
   // 读取Store
   const { message, onSubmit, close } = useConfirmDialogStore()

   // 当onSubmit存在时渲染对话框
   return (
      <Dialog
         open={Boolean(onSubmit)}
         onClose={close}
         maxWidth="sm"
         fullWidth
      >
         <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
         >
            <DialogTitle>你确定吗？</DialogTitle>
            <IconButton onClick={close}>{/* <Close /> */}</IconButton>
         </Box>
         <DialogContent>
            <Alert severity="error">{message}</Alert>
         </DialogContent>
         <DialogActions sx={{ padding: (theme) => theme.spacing(2) }}>
            <Button
               color="primary"
               variant="contained"
               onClick={close}
            >
               取消
            </Button>
            <Button
               color="secondary"
               variant="contained"
               onClick={() => {
                  if (onSubmit) {
                     onSubmit(true)
                  }
                  close()
               }}
            >
               确认
            </Button>
         </DialogActions>
      </Dialog>
   )
}

export default ConfirmDialog

问题根源 #

目前只有「确认」按钮触发了onSubmit(true)，而「取消」按钮、对话框关闭按钮（叉号）、点击遮罩层关闭这几种用户拒绝操作的场景，只调用了close()，没有触发onSubmit(false)，所以回调函数拿不到拒绝的状态。

修改方案 #

需要在所有用户拒绝的操作中，先调用onSubmit(false)再关闭对话框，还可以封装重复逻辑避免冗余：

const ConfirmDialog = () => {
   const { message, onSubmit, close } = useConfirmDialogStore()

   // 封装拒绝操作的统一逻辑
   const handleReject = () => {
      if (onSubmit) {
         onSubmit(false)
      }
      close()
   }

   return (
      <Dialog
         open={Boolean(onSubmit)}
         onClose={handleReject} // 处理遮罩层关闭
         maxWidth="sm"
         fullWidth
      >
         <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
         >
            <DialogTitle>你确定吗？</DialogTitle>
            <IconButton onClick={handleReject}>{/* <Close /> */}</IconButton> // 处理叉号关闭
         </Box>
         <DialogContent>
            <Alert severity="error">{message}</Alert>
         </DialogContent>
         <DialogActions sx={{ padding: (theme) => theme.spacing(2) }}>
            <Button
               color="primary"
               variant="contained"
               onClick={handleReject} // 处理取消按钮
            >
               取消
            </Button>
            <Button
               color="secondary"
               variant="contained"
               onClick={() => {
                  if (onSubmit) {
                     onSubmit(true)
                  }
                  close()
               }}
            >
               确认
            </Button>
         </DialogActions>
      </Dialog>
   )
}

修改后，用户无论是点击取消、关闭按钮还是遮罩层，都会触发onSubmit(false)，回调函数就能捕获到拒绝状态并执行对应逻辑了。

内容的提问来源于stack exchange，提问作者user3169083