Svelte中用{#each}遍历writable store报错，如何解决？

核心错误点 #

1. JSON解析错误：response.json是方法，必须调用response.json()才能拿到解析后的数据，否则data会是函数本身，不是数组/类数组对象。
2. 缓存逻辑错误：缓存命中时，错误地将整个Map对象传给Promise，应该取出对应URL的缓存数据cache.get(url)。

修正后的代码 #

getData.js

import { writable } from "svelte/store";

const cache = new Map();

export function getData(url, option = {}) {
    const store = writable(new Promise(() => {}));

    if (cache.has(url)) {
        // 取出对应URL的缓存数据，而非整个Map
        store.set(Promise.resolve(cache.get(url)));
        return store;
    }

    const load = async () => {
        try {
            const response = await fetch(url, option);
            // 调用json()方法解析响应
            const data = await response.json();
            cache.set(url, data);
            store.set(Promise.resolve(data));
        } catch (error) {
            // 捕获错误并传递给组件
            store.set(Promise.reject(error));
        }
    };

    load();
    return store;
}

Navigation.svelte（可保持不变，需确保接口返回数组）

<script lang="ts">
    import { getData } from "../js/helper/getData";

    const options = {
        method: "GET",
        headers: {
            "KEY": VALUE,
        },
    };

    const response = getData(
        "URL",
        options
    );
</script>

<div>
    {#await $response}
        <p>...waiting</p>
    {:then data}
        {#each data as category}
            <a href="#">
                {category.name}
            </a>
        {/each}
    {:catch error}
        <p>An error occurred! {error.message}</p>
    {/await}
</div>

额外提示 #

• 确认接口返回的确实是数组，如果接口返回的是包含数组的对象（比如{ categories: [...] }），需要在:then块里取对应数组字段，比如{#each data.categories as category}。
• 新增的错误捕获逻辑可以让组件更直观地展示错误信息，方便调试。

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