Svelte Store获取数据后页面显示[object, object]问题排查

问题场景 #

从API获取数组并在HTML中渲染时，始终显示[object, object]或undefined，尝试仅获取API中的名称字段，怀疑是Svelte Store定义问题。

相关代码 #

league-store.js #

import { writable } from "svelte/store";

export const leagueStore = writable([]);

const fetchLeagues = async () => {
    const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': 'API_KEY',
            'X-RapidAPI-Host': 'v3.football.api-sports.io'
        }
    }
    const url = `https://v3.football.api-sports.io/leagues?season=2022`;
    const res = await fetch(url, options);
    const data = await res.json();
    const loadedLeagues = data.response.map((data) => {
        return {
            leagues: data
        }
    });
    leagueStore.set(loadedLeagues);
}
fetchLeagues();

+page.svelte #

<script>
    import { leagueStore } from "../../stores/league-stores";

    console.log($leagueStore)
</script>

<div class="absolute top-[80px] right-0 w-[85vw] p-6">

    {#each $leagueStore as leagues}
        <p>{leagues}</p>
    {/each}

</div>

API响应示例 #

{
    "get": "leagues",
    "parameters": {
        "season": "2022"
    },
    "errors": [],
    "results": 815,
    "paging": {
        "current": 1,
        "total": 1
    },
    "response": [
        {
            "league": {
                "id": 351,
                "name": "4. liga - Divizie B",
                "type": "League",
                "logo": "https://media.api-sports.io/football/leagues/351.png"
            },
            "country": {
                "name": "Czech-Republic",
                "code": "CZ",
                "flag": "https://media.api-sports.io/flags/cz.svg"
            },
            "seasons": [
                {
                    "year": 2022,
                    "start": "2022-08-05",
                    "end": "2023-06-10",
                    "current": true,
                    "coverage": {
                        "fixtures": {
                            "events": true,
                            "lineups": false,
                            "statistics_fixtures": false,
                            "statistics_players": false
                        },
                        "standings": true,
                        "players": false,
                        "top_scorers": false,
                        "top_assists": false,
                        "top_cards": false,
                        "injuries": false,
                        "predictions": true,
                        "odds": false
                    }
                }
            ]
        }
    ]
}

问题原因 #

1. 数据结构嵌套冗余：在fetchLeagues的map方法中，把每个API响应对象又包裹了一层{ leagues: data }，导致Store中的每个元素都是嵌套对象，直接渲染整个对象就会显示[object Object]。
2. 未正确提取目标字段：API中的名称字段位于response[].league.name，但原代码没有直接提取该字段，而是存储了整个响应对象。

修正方案 #

1. 修正Store的数据处理逻辑 #

修改league-store.js中的map部分，直接提取需要的字段：

const loadedLeagues = data.response.map(item => {
    return {
        id: item.league.id,
        name: item.league.name,
        logo: item.league.logo,
        countryName: item.country.name
    };
});
leagueStore.set(loadedLeagues);

这样Store中存储的是扁平化的对象数组，每个对象包含直接可用的字段。

2. 修正页面渲染逻辑 #

修改+page.svelte中的遍历代码，直接访问name字段：

{#each $leagueStore as league}
    <p>{league.name}</p>
{/each}

补充说明 #

• 初始状态下Store是空数组，数据加载完成前不会渲染任何内容，若想处理加载状态可添加{#if $leagueStore.length > 0}判断。
• 若仍出现undefined，可检查API请求是否成功（查看控制台Network面板），或确认API返回的response数组是否存在。

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