页面刷新后获取内容消失，求排查Svelte Standings组件问题

页面刷新后，已加载的内容会消失，仅首次加载正常；其他代码逻辑几乎一致的组件可正常运行，因此不确定该组件问题所在，怀疑问题出在standings.svelte组件的flatMap函数中，这是该组件与其他组件的主要区别。

standings.svelte 组件代码 #

<script>
import {leagueStandings} from "../../stores/league-standings-stores"

const tablePositions = $leagueStandings.flatMap(({ standings: { data } }) => data);

</script>

<div class="bg-[#1C1C25] p-8 rounded-lg box-border w-fit">
    
    {#each tablePositions as tablePosition}
            <div class="standings-table flex gap-9 mb-2 pb-4 pt-3 border-b border-[#303041]">
                <div class="team-details flex gap-4 w-full" id="td">
                    <p class="w-[18px]">{tablePosition.position}</p>
                    <img src="{tablePosition.team.data.logo_path}" alt="" class="w-[1.5em] object-scale-down">
                    <p>{tablePosition.team_name}</p>
                </div>

                <div class="team-stats flex gap-5 text-left child:w-5 child:text-center w-full">
                    <p>{tablePosition.overall.games_played}</p>
                    <p>{tablePosition.overall.won}</p>
                    <p>{tablePosition.overall.draw}</p>
                    <p>{tablePosition.overall.lost}</p>
                    <p>{tablePosition.overall.goals_scored}</p>
                    <p>{tablePosition.overall.goals_against}</p>
                    <p>{tablePosition.total.goal_difference}</p>
                    <p>{tablePosition.overall.points}</p>
                    <p class="!w-[78px] !text-left">{tablePosition.recent_form}</p>
                </div>
            </div>
    {/each}
</div>

Svelte Store 代码 #

import { writable } from "svelte/store";

export const leagueStandings = writable([]);

const fetchStandings = async () => {
    const url = `https://soccer.sportmonks.com/api/v2.0/standings/season/19734?api_token=API_KEY`;
    const res = await fetch(url);
    const data = await res.json();
    leagueStandings.set(data.data);

}
fetchStandings();

排查建议 #

• 修复响应式依赖：tablePositions是普通常量，仅在组件初始化时计算一次。当leagueStandings store刷新后更新数据时，它不会重新计算。改成响应式语句，确保store更新时自动重新生成数据：

  // 替换原常量声明
  $: tablePositions = $leagueStandings.flatMap(({ standings: { data } }) => data);
  

• 添加空值安全校验：刷新后返回的数据可能存在结构异常，比如某个项没有standings.data，导致flatMap出错。增加校验避免崩溃：

  $: tablePositions = $leagueStandings.flatMap(item => item?.standings?.data || []);
  

• 调试数据变化：在组件中添加日志，确认store和计算后的数据是否正常更新：

  $: console.log('store数据:', $leagueStandings);
  $: console.log('处理后的数据:', tablePositions);
  

• 检查Store加载时机：页面刷新时store初始值是空数组，组件会先渲染空内容，待fetch完成后才会更新store。使用响应式语句可以确保组件监听store变化，自动重新渲染。

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