尽管成功提交了路线和表单，但 Next.js 联系表单中未触发 Toast 通知

Question

我正在 Next.js 中使用服务器端电子邮件功能制作联系表单。表单提交工作正常，并且电子邮件发送成功（通过网络和控制台日志验证）。但是，成功或错误时都不会出现 Toast 通知（使用

useToast

）。我已确认路线和

SendEmail

功能按预期工作，并且我已正确导入并初始化

useToast

挂钩。

尽管如此，提交表单后 toast 并没有显示。这是

handleSubmit

函数中 toast 的相关代码片段。我不确定是什么阻止了吐司的触发。我在 Next.js 应用程序中处理 toast 状态或渲染过程的方式是否有问题？

"use client";

import { Input } from "@/components/ui/input";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { SendEmail } from "@/components/send-email";
import { useToast } from "@/hooks/use-toast"; 
import { useRouter } from "next/navigation";
import { Send } from "lucide-react";

export default function ContactForm() {
    const { toast } = useToast(); 
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault(); 
        const formData = new FormData(e.currentTarget); 

        try {
            const result = await SendEmail(formData);
            if (result.success) {
                toast({
                    title: "Message Sent",
                    description: "Your message has been sent successfully.",
                });
                router.push("/");
            }
        } catch (error) {
            toast({
                title: "Error",
                description: "Failed to send the message. Please try again.",
                variant: "destructive", 
            });
        }
    };

    return (
        <Card className="w-full max-w-2xl mx-auto shadow-lg">
            <form onSubmit={handleSubmit}>
                <CardContent className="space-y-2">
                    <div className="grid grid-cols-2 gap-1">
                        <div className="flex flex-col items-start space-y-1">
                            <Input
                                type="text"
                                id="name"
                                name="name"
                                required
                                placeholder="First and Last Name"
                                className="w-full"
                            />
                        </div>
                        <div className="flex flex-col items-start space-y-1">
                            <Input
                                type="email"
                                id="email"
                                name="SenderEmail"
                                required
                                placeholder="Personal email"
                                className="w-full"
                            />
                        </div>
                    </div>
                    <div className="flex flex-col items-start space-y-0">
                        <select
                            id="subject"
                            name="subject"
                            required
                            className="w-full h-10 px-3 py-2 text-sm rounded-md border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                        >
                            <option value="">Select a subject</option>
                            <option value="General">General Inquiry</option>
                            <option value="schedule">Schedule A Meeting</option>
                            <option value="others">Others</option>
                        </select>
                    </div>
                    <div className="flex flex-col items-start space-y-1">
                        <Textarea
                            id="message"
                            placeholder="Leave me a short message, feel free to drop your phone number if you prefer!"
                            name="message"
                            required
                            className="w-full min-h-[150px]"
                        />
                    </div>
                </CardContent>
                <div className="flex justify-center items-center">
                    <CardFooter>
                        <Button type="submit" variant={"outline"} className="w-full">
                            <Send className="w-5 h-5 mr-2" />
                            Send Message
                        </Button>
                    </CardFooter>
                </div>
            </form>
        </Card>
    );
}

我希望在表单提交成功或发生错误时出现 toast 通知。我验证了表单提交有效，并且

SendEmail

功能运行没有问题。我还确认了

useToast

钩子已正确导入并初始化。尽管如此，Toast 通知永远不会出现。我尝试记录成功和错误状态，逻辑按预期运行，但 toast 本身没有显示在页面上。

我希望在表单提交后出现一条 Toast 通知，并显示成功消息或失败时的错误消息，但视觉上没有任何反应。

Answer 1

您应该从

Toaster

导入

"@/components/ui/toaster"

:

import { Toaster } from "@/components/ui/toaster"
export default function ContactForm() {
//Logic
   return (
      <Card>
         <Toaster/>
         <form>
           {/*... rest*/}
         </form>
      </Card>
   )
}