Svelte5中await块内更新状态触发state_unsafe_mutation错误如何解决？

我有一个表单，点击提交时执行handleSubmit()，验证密码与确认密码一致后，调用register.setRegistrationStatus(true)，之后通过sendRegistrationCredentials把凭证发送到Flask后端。目前能捕获请求错误，但无法将register.isRegistrationSuccessful设为false，还触发了Svelte的错误：

Uncaught (in promise) Svelte error: state_unsafe_mutation
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without $state

完整代码如下：

<form onsubmit={(preventDefault(() => handleSubmit()))}>
    <Username bind:value={username}/>
    <Email  bind:value={email}/>
    <Password bind:value={password}/>
    <ConfirmPassword {password} bind:value={confirmPassword}/>

    {#if register.isRegistrationSuccessful}
        {#await sendRegistrationCredentials}
            <button class="btn btn-info mt-4 btn-disabled">Sign up <span class="loading loading-spinner loading-sm"></span></button>
        {:then}
            {goto('/check-mail')}
        {:catch error}
        <button class="btn btn-info mt-4">Sign up</button>
        <div class="mt-4"><span class="text-error">{error}</span></div>
        {register.isRegistrationSuccessful = false}
        {/await} 
    {:else}
    <button class="btn btn-info mt-4">Sign up</button>

    {/if}
</form>

核心原因 #

Svelte严格禁止在模板表达式（如{#await}的:catch代码块、模板插值等）中直接修改响应式状态，你在{:catch}块里执行register.isRegistrationSuccessful = false的操作，属于违规修改状态，因此触发state_unsafe_mutation错误。

修复方案 #

步骤1：将状态修改逻辑移至脚本层 #

不要在模板内处理Promise的状态变更，而是在组件脚本的handleSubmit函数中完成所有异步逻辑和状态修改：

// 组件脚本部分
let errorMessage = ''; // 新增响应式变量存储错误信息

async function handleSubmit() {
    // 先验证密码一致性
    if (password !== confirmPassword) {
        errorMessage = '密码与确认密码不一致';
        return;
    }

    // 开始注册，设置状态为成功中
    register.setRegistrationStatus(true);
    errorMessage = ''; // 清空之前的错误

    try {
        await sendRegistrationCredentials();
        // 注册成功，跳转页面
        goto('/check-mail');
    } catch (error) {
        // 注册失败，重置状态并保存错误信息
        register.setRegistrationStatus(false);
        errorMessage = error.message || '注册失败，请稍后重试';
    }
}

步骤2：简化模板逻辑 #

模板只负责渲染状态和触发提交，不再处理异步逻辑的结果：

<form onsubmit|preventDefault={handleSubmit}>
    <Username bind:value={username}/>
    <Email bind:value={email}/>
    <Password bind:value={password}/>
    <ConfirmPassword {password} bind:value={confirmPassword}/>

    {#if register.isRegistrationSuccessful}
        <button class="btn btn-info mt-4 btn-disabled" disabled>
            Sign up <span class="loading loading-spinner loading-sm"></span>
        </button>
    {:else}
        <button class="btn btn-info mt-4">Sign up</button>
    {/if}

    <!-- 单独渲染错误信息 -->
    {#if errorMessage}
        <div class="mt-4">
            <span class="text-error">{errorMessage}</span>
        </div>
    {/if}
</form>

额外优化点 #

• 使用Svelte内置的onsubmit|preventDefault修饰符替代手动调用preventDefault，语法更简洁规范。
• 给加载状态的按钮添加disabled属性，避免重复提交。
• 错误信息单独用响应式变量存储，模板只负责条件渲染，符合关注点分离原则。

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