SvelteKit服务端更新逻辑求助：Server Action输入异常问题

一、先解决「Action无法获取输入内容」的问题 #

你目前的代码里，Input组件缺少**name属性**——表单提交时，浏览器是通过name而非id来识别字段并打包数据的，所以data.get('email-input')会拿不到值。

修改+page.svelte里的Input组件，添加name属性：

<Input 
  id="email-input" 
  name="email-input" <!-- 新增这一行 -->
  size="lg" 
  placeholder="email" 
  bind:value={_email} 
/>

如果你的Input是自定义组件，需要确保它把name属性透传到内部的原生<input>元素上，比如自定义组件内部：

<script>
  export let name;
  // 其他props...
</script>
<input {name} {...$$restProps} />

二、解决「点击提交后输入框重置」的问题 #

默认情况下，SvelteKit的use:enhance在表单提交后会重新渲染页面，导致绑定的_email回到初始值。可以通过两种方式解决：

方案1：通过服务端返回数据同步状态

修改+page.server.ts的Action，处理完更新后返回最新的邮箱值：

export const actions: Actions = {
    updateUser: async ({ cookies, request }) => {
        const data = await request.formData();
        const email = data.get('email-input') as string;
        console.log({ email });

        // 调用你的更新API，直接用cookies里的token（服务端可读取httpOnly Cookie）
        const updateRes = await fetch('你的用户更新API地址', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${cookies.get('accessToken')}`
            },
            body: JSON.stringify({ email })
        });

        if (updateRes.ok) {
            // 返回更新后的邮箱，供客户端同步
            return { email };
        } else {
            // 处理错误，返回错误信息
            return { error: '邮箱更新失败' };
        }
    }
};

然后在+page.svelte里监听页面的form状态，同步_email：

<script>
  import { page } from '$app/stores';
  import { enhance } from '$app/forms';

  // 假设初始邮箱从页面load数据中获取
  let _email = $page.data.user.email;
  $: isEmailChanged = _email !== $page.data.user.email;

  // 同步服务端返回的最新邮箱值
  $: if ($page.form?.email) {
    _email = $page.form.email;
  }
</script>

方案2：用use:enhance手动阻止表单重置

直接在表单的use:enhance回调中禁用默认的重置行为：

<form 
  action="?/updateUser" 
  method="post" 
  use:enhance={({ fetch }) => {
    return async ({ update }) => {
      const res = await fetch();
      // 阻止表单自动重置，保留当前输入值
      update({ reset: false });
      
      // 可选：如果需要从服务端同步最新数据
      const result = await res.json();
      if (result.email) _email = result.email;
    };
  }}
>
  <!-- 表单内容不变 -->
</form>

额外说明 #

服务端Action天然可以读取httpOnly的Cookie，所以你不需要在前端处理token，直接在Action里通过cookies.get('accessToken')获取即可，这部分你的思路是对的。

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