Я борюсь с ошибкой при попытке составить таблицу бесконечной прокрутки.
Он работает нормально, пока я не обновлю страницу, а затем получаю ошибку «Невозможно вызвать fetch
во время рендеринга на стороне сервера с относительным URL-адресом (/api/clients/getClients) — вместо этого поместите вызовы fetch
внутри onMount
или функции load
»
Кажется, я не могу найти никакой документации, которая разъясняла бы, что это означает в этом контексте и что может измениться при перезагрузке страницы?
<script lang = "ts">
import {onMount, onDestroy} from "svelte";
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import Table from '$lib/component/table/Table.svelte';
// Data
$:client_type = $page.params.type;
let limit:number = 30;
let offset:number = 0;
$:search = "";
let headers: any = [];
let data:any = [];
let newBatch:any = [];
let noMore:boolean = false;
async function fetchData() {
const response = await fetch('/api/clients/getClients', {
method: 'POST',
headers: {'Content-Type': 'application/json',},
body: JSON.stringify({ 'client_type': client_type, 'limit': limit, 'offset': offset, 'search': search })
});
let result = await response.json();
headers = result.headers;
newBatch = result.content;
newBatch.length < limit ? noMore = true : noMore = false;
};
onMount(()=> {
fetchData();
})
$: data = [
...data,
...newBatch
];
$: onChange(client_type, search);
function onChange(client_type:string, search:string) {
data = [];
newBatch= [];
offset = 0;
noMore = false;
fetchData();
}
// Infinite Scroll
$:y = 0;
$:h = 0;
function handleScroll() {
if (y > (h)) {
h = h*2;
offset = offset+limit;
if (!noMore) {
fetchData();
}
}
}
// Click on Row
function handleClick(event:CustomEvent) {
goto('/client/'+event.detail.id.data);
}
</script>
<svelte:window bind:scrollY = {y} bind:innerHeight = {h} on:scroll = {handleScroll} />
<main>
{#key client_type || search}
<Table headers = {headers} content = {data} on:clickRow = {handleClick} />
{/key}
</main>
🤔 А знаете ли вы, что...
Svelte предоставляет интуитивный синтаксис для создания компонентов и отслеживания состояния.
Когда веб-браузер получает первую страницу с сервера SvelteKit (как это происходит при перезагрузке страницы в веб-браузере), сервер запустит ваш SPA на сервере, получит обработанный HTML-код и отправит его в веб-браузер. , чтобы веб-браузер мог быстро получить и отобразить HTML-код. Затем веб-браузер начнет запускать SPA, и с этого момента он продолжит работать как SPA на клиенте.
В вашем случае ваш компонент немедленно вызывает onChange()
, который затем, в свою очередь, вызывает fetchData()
, который затем, в свою очередь, вызывает fetch()
. На это жалуется сервер. Вместо этого вам следует использовать функцию load().