Svelte中Fetch请求访问嵌套数组时出现undefined问题

问题描述 #

在Svelte项目中从API获取联赛排名数据时，访问嵌套数组时要么显示[object, object]，要么返回undefined。虽然能在控制台看到完整数据，但无法正确访问position等具体属性值。

原始代码问题分析 #

组件代码的核心错误 #

1. Store订阅方式错误：直接调用leagueStandings.map是错误的，leagueStandings是Svelte Store对象，必须通过$leagueStandings语法访问其当前值，且原始代码的map写法存在语法错误。
2. 嵌套层级处理缺失：API返回的数据中，standings字段下还有一层data数组，原始代码只取到了standings对象，没有深入到实际的排名数据数组。
3. 未处理异步加载状态：初始时$leagueStandings是空数组，直接遍历会导致undefined报错。

修复方案 #

修复后的组件代码 #

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

// 响应式计算排名数据，处理嵌套层级与空状态
$: tablePositions = $leagueStandings.flatMap(stage => stage.standings?.data || []);
</script>

{#if tablePositions.length === 0}
  <p>加载中...</p>
{:else}
  {#each tablePositions as team}
    <h2>第{team.position}名：{team.team_name}</h2>
  {/each}
{/if}

关键修复点说明 #

• 响应式语句$:：当$leagueStandings的数据更新时（API请求完成后），自动重新计算tablePositions。
• flatMap处理嵌套数组：将每个赛事阶段（stage）下的standings.data排名数组合并为一个一维数组，方便后续遍历。
• 可选链?.与默认值：stage.standings?.data避免初始加载时standings未定义导致的报错，|| []确保即使没有数据也返回空数组，防止遍历出错。
• 加载状态提示：处理API请求未完成时的空状态，提升用户体验。

Store代码说明 #

Store部分代码无需修改，它已经正确将API返回的data数组存入leagueStandings Store中。

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