提交表单后Dialog未关闭的问题求助

你遇到的核心问题是：外部传入的open状态和Dialog组件内部的状态冲突。从代码来看你用的应该是shadcn/ui的Dialog组件，默认情况下DialogTrigger会自行管理Dialog的显示/隐藏状态，此时你从父组件传入的open和setOpen并不会影响Dialog的实际显示状态，这就导致你在onSuccess里调用setOpen(false)时，只是修改了父组件的状态，却无法关闭Dialog。

将Dialog切换为外部状态控制模式，让它完全使用父组件传入的open和setOpen来管理显示状态，具体修改如下：

修改CreateScheduleDialog组件 #

移除DialogTrigger（你的打开逻辑是通过日历点击触发，不需要这个触发按钮），并给Dialog组件绑定open和onOpenChange属性：

const CreateScheduleDialog = ({ open, setOpen, pickedDate }: Props) => {
  const { mutate, isPending } = useMutation({
    mutationFn: CreateAppointment,
    onSuccess: () => {
      toast.success("Appointment created successfully 🎉", {
        id: "create-appointment",
      });

      form.reset();

      queryClient.invalidateQueries({ queryKey: ["appointment"] });
      setOpen(false); // 现在这个调用会正确关闭Dialog
    },
  });

  const onSubmit = useCallback(
    (values: CreateAppointmentSchemaType) => {
      toast.loading("Creating Appointment...", { id: "create-appointment" });
      mutate(values);
    },
    [mutate],
  );

  return (
    {/* 绑定open和onOpenChange，让Dialog使用外部状态 */}
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className={cn(`max-w-[400px] md:max-w-[800px]`)}>
        <DialogHeader>
          <DialogTitle>{currentStep.name}</DialogTitle>
          <DialogDescription>
            Step {step + 1} of {steps.length}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-8"
          ></form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};

额外说明 #

1. 如果你需要保留原来的"Add Schedule"按钮，可以将它改为手动触发setOpen(true)，而不是用DialogTrigger包裹：

   <Button
     onClick={() => setOpen(true)}
     className="w-full"
     color="primary-foreground"
   >
     Add Schedule
   </Button>
   

2. 确保父组件的open状态和Dialog的状态完全同步，避免混合使用内部/外部状态导致的冲突。

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