Estoy tratando de mostrar los datos que solicito mediante la obtención de API. Todo funciona bien excepto buscar.
Este es mi componente llamado Items.svelte :
<script> let items = []; async function load({ fetch }) { const url = "../r/api/items/all"; let res = await fetch(url); if (res.ok) { return { props: { items: await res.json(), }, }; } return { status: res.status, error: new Error(), }; } </script> {#each items as item} <header> <h2>{item.title}</h2> <p>{item.body}</p> </header> {/each} Esta es App.svelte :
<script> import Items from '$lib/Items.svelte'; </script> <Items />¿Qué estoy haciendo mal?
Según la documentación ---> https://kit.svelte.dev/docs/loading
Te falta la sección de secuencia de comandos context="module" . Debería ser :
<script context="module"> export async function load({ fetch }) { let res = await fetch('../r/api/items/all'); if (res.ok) { return { props: { items: await res.json() } }; } return { status: res.status, error: new Error() }; } </script> <script> export let items = [] </script> {#each items as item} <header> <h2>{item?.title}</h2> <p>{item?.body}</p> </header> {/each}En los documentos ( https://kit.svelte.dev/docs/loading ) dice: "Un componente que define una página o un diseño puede exportar una función de carga que se ejecuta antes de que se cree el componente".
No puede usar la carga desde un componente, solo desde una página o diseño.
ver también https://stackoverflow.com/a/67429568/1390405