SvelteKit表单Action无法接收更新后的响应式变量问题求助

核心问题原因 #

1. 隐藏输入框直接绑定了store对象subject，而非订阅后的状态值$subject，导致表单提交时无法正确获取对象数据。
2. 即使绑定$subject，直接将对象赋值给value会被转为字符串"[object Object]"，服务器端无法解析出有效数据。
3. 循环里的变量名写错：alumno.nombre应该是student.nombre，这会导致学生姓名无法正确绑定。

修正步骤 #

1. 修正前端表单代码

将隐藏输入框的value改为序列化后的JSON字符串，同时修正循环变量名：

<form class="subject-form" method="POST" action="?/create"> 
    <!-- 序列化store状态为JSON字符串 -->
    <input type="hidden" name="subject" value={JSON.stringify($subject)} />
    <!-- ... (其他内容) -->

     {#each $subject.students as student, index}
          <label for="student-name-{index}">Nombre:</label>
          <input
               id="student-name-{index}"
               type="text"
               bind:value={student.nombre}
               required
          />
     {/each}
</form>

2. 修正服务器端Action代码

收到表单数据后，解析JSON字符串：

export const actions = {
    create: async ({ cookies, request }) => {
        const data = await request.formData();
        // 获取序列化的subject字符串并解析
        const subjectStr = data.get('subject');
        let subject;
        try {
            subject = JSON.parse(subjectStr);
        } catch (err) {
            // 处理解析错误，比如返回错误提示
            return { error: 'Invalid subject data' };
        }
        // 后续使用subject对象处理业务逻辑
        console.log(subject);
    }
};

额外说明 #

• 确保$subject的状态在表单提交前已经正确填充了name和students数据。
• 如果students数组里的对象初始没有nombre属性，建议先初始化每个学生对象的nombre字段，避免绑定失败。

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