Estoy tratando de actualizar la tienda svelte con una serie de usuarios obtenidos del servidor:
const fetchUsers = async () => { const resp = await fetch(baseUrl + "/users/"); if (!resp.ok) { throw new Error(`HTTP error ${resp.status}`); console.log(Error); } else { users = await resp.json(); $UsersStore.update((currentState) => { return [...currentState, users]; }); console.log("users are:", users); console.log("$UsersStore is:", $UsersStore); } };La tienda se define de la siguiente manera:
import {writable} from 'svelte/store'; const UsersStore = writable ([]); export default UsersStore;Los valores de registro de la consola son como:
users are: (4) [{…}, {…}, {…}, {…}] $UserStore is: [Array(4)]Así que cuando itero sobre los usuarios
{#each $UersStore as user} <div> {user.username} </div> {/each} Me quedo undefined .
También probé cosas como
UsersStore.update((currentState) => { return [currentState.push(users)];Pero eso tampoco funcionó.
Me pregunto ¿cómo puedo arreglar esto?
Bueno, básicamente necesitaba concatenar la matriz de usuarios a la tienda existente:
UsersStore.update((us) => { return us.concat(users); });No estoy seguro de que sea la forma idiomática de actualizar la tienda esbelta, pero funciona de todos modos.
Con suerte, esto también ayudará a otros, porque no había visto ningún ejemplo de este tipo que implicara configurar datos json obtenidos para almacenarlos en tutoriales existentes.