SvelteKit中Toast首次返回undefined，二次点击才显示正确信息

问题原因 #

你当前的实现是在按钮点击事件中直接调用addToast，但此时表单的异步提交还未完成，form变量仍处于初始状态（首次点击时为undefined）。只有当服务器返回响应后，form才会被更新，因此第二次点击时才能拿到上一次提交后的结果，导致首次显示undefined。

解决方案 #

利用use:enhance的回调函数，在表单提交完成、服务器返回响应后，再根据返回结果添加Toast。这样能确保拿到最新的服务器返回数据，不会出现提前读取form的情况。

修改+page.svelte代码 #

移除按钮上的on:click事件，改用use:enhance的回调处理Toast逻辑：

<script>
    // @ts-ignore
    import Logo from "/src/components/Logo.svelte";
    import { enhance } from "$app/forms";
    import Toasts from "../../components/Toasts.svelte";
    import { addToast } from "../../stores";
    export let form;
</script>

<Toasts />

<main>
    <div class="logo">
        <div class="image-container">
            <Logo width=200px/>
        </div>
    </div>
    <div class="container">
        <form method="POST" use:enhance={({ result }) => {
            if (result.type === 'failure') {
                // 登录失败，添加错误提示Toast
                addToast({ 
                    message: result.data.message, 
                    type: result.data.type || 'error' 
                });
            } else if (result.type === 'success') {
                // 登录成功时添加提示（注意：服务器会触发redirect，可能需要调整显示时机）
                addToast({ message: '登录成功！', type: 'success' });
            }
        }}>
            <h1>Login</h1>

            <label for="email">Email</label>
            <input type="email" name="email" required />

            <label for="password">Wachtwoord</label>
            <input type="password" name="password" required />

            <button>Login</button>
            <p>Nog geen account?<a href="/register">Registreer hier</a></p>
        </form>
    </div>
</main>

完善+page.server.ts返回值 #

确保所有fail返回都包含type字段，避免Toast的type出现undefined：

// 基础检查部分的fail返回
return fail(400, {
    message: "Uw gebruikersnaam en/of wachtwoord is verkeerd",
    type: "error" // 新增type字段
});

核心逻辑说明 #

use:enhance的回调函数会在表单提交的整个生命周期中触发，其中result参数包含了服务器返回的完整响应数据：

• 当登录失败时，result.type为failure，result.data就是你在服务器端fail函数中返回的对象
• 当登录成功时，result.type为success，此时服务器会触发redirect，如果需要显示成功Toast，可根据实际情况调整显示逻辑

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