SVELTEKIT + Superforms: Data Mlickers и заменяется неправильными данными на перезагрузке страницы ⇐ Javascript

[Anonymous]

Я создаю приложение Sveltekit, где пользователи могут редактировать подробности учащихся по динамическому маршруту (/студент/[id]). Я использую Supabase для базы данных и Sveltekit Superforms для обработки формы. < /P>
Функциональность редактирования работает правильно. Тем не менее, я сталкиваюсь с странной проблемой с согласованностью данных только при перезагрузке страниц.
Проблема
Когда я перемещаюсь со страницы списка студентов (/студентов) на конкретную страницу подробности студента (/студент/[id]), данные издаются и форма на основе. (например, /student/123-abc-456).> наблюдаемое поведение при перезагрузке: < /h3>
Правильные данные студента извлекаются из функции нагрузки и отображаются на странице на короткий момент. Я мог бы подтвердить это с помощью компонента Superdebug < /p>
Несфа-данные на странице (например, заголовок), в которых используется данные. Студент остается правильным. Это говорит о том, что проблема специфична для Superforms Store ($ form). < /P>
Я подтвердил в журнале, что объект Data.Student, переданный из +page.server.ts, всегда верен. Проблема, по -видимому, связана с тем, как хранилище $ form store увлажняется или обновляется на стороне клиента после полной загрузки страницы. < /P>
Что может привести к обновлению хранилища $ form с неправильными данными после перезагрузки страницы, и как я могу убедиться, что он остается в синхронизации с загруженным данных для текущей страницы? class = "lang-js prettyprint-override">import { supabase } from '$lib/supabaseClient';

import type { PageServerLoad } from './$types';
import type { Actions } from '@sveltejs/kit';
import { zod } from 'sveltekit-superforms/adapters';
import { superValidate } from 'sveltekit-superforms';

import { fail } from '@sveltejs/kit';
import type { Student } from '$lib/types';

import z from 'zod';

const studentSchema = z.object({
id: z.string().uuid(),
first_name: z.string().min(2, 'Vorname ist erforderlich.'),
last_name: z.string().min(2, 'Nachname ist erforderlich.'),
email: z.string().email('Ungültige E-Mail-Adresse.').nullable(),
phone_number: z.string().nullable()
});

// This is responsible for loading the data from the database
export const load: PageServerLoad = async (event) => {
const id = event.params.id;

const { data: student, error } = await supabase
.from('students')
.select('*')
.eq('id', id)
.single();

if (error || !student) {
console.error('Error loading student:', error?.message);
}

const form = await superValidate(student, zod(studentSchema));

return { student, form };
};

// This is responsible for the form submission
export const actions: Actions = {
default: async ({ request }) => {
const form = await superValidate(request, zod(studentSchema));

if (!form.valid) {
return fail(400, { form });
}

const { error } = await supabase.from('students').update(form.data).eq('id', form.data.id);

if (error) {
console.error('Error updating student:', error.message);
return fail(400, { form });
}

return { form };
}
};

< /code>
+page.svelte

import Button from '$lib/components/ui/button/button.svelte';
import * as Tabs from '$lib/components/ui/tabs';
import * as Card from '$lib/components/ui/card';
import type { PageData } from './$types';

import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import SuperDebug, { superForm } from 'sveltekit-superforms';
import { Badge } from '$lib/components/ui/badge';
import Mail from '@lucide/svelte/icons/mail';
import Phone from '@lucide/svelte/icons/phone';
import Pencil from '@lucide/svelte/icons/pencil';
import FormButton from '$lib/components/ui/form/form-button.svelte';
import Input from '$lib/components/ui/input/input.svelte';

export let data: PageData;

const { form, errors, enhance } = superForm(data.form);
console.log($form);


{#if data.student}
{#key data.student.id}






Schülerprofil von {data.student.first_name}
{data.student.last_name}



{#if data.student}


Übersicht
Password









class="h-24 w-24 rounded-full"
/>


{data.student.first_name}
{data.student.last_name}



{data.student.driving_class}






[url=mailto:{data.student.email}]
{data.student.email}
[/url]



{data.student.phone_number}









Schüler-Info





Vorname

{#if $errors.first_name}
{$errors.first_name}
{/if}

Nachname

{#if $errors.last_name}
{$errors.last_name}
{/if}

E-Mail Adresse

{#if $errors.email}
{$errors.email}
{/if}

Telefonnummer

{#if $errors.phone_number}
{$errors.phone_number}
{/if}

Speichern







Change your password here.

{:else}
Fehler beim Laden des Schülers.
{/if}

{/key}
{/if}



Подробнее здесь: https://stackoverflow.com/questions/797 ... -page-relo