Svelte中API返回的JSON数组无法迭代问题求助

你的问题出在两个关键细节上：

1. loadList函数未返回数据 #

原函数里只是获取了数据并打印，但没有返回这个数组，导致{#await}的:then块接收到的是undefined，而非API返回的数组，{#each}自然会抛出“非数组类型对象”的错误。

2. 局部变量遮蔽了全局变量 #

函数内部的let foodList是局部变量，和你声明的全局let foodList完全无关，所以全局变量始终是未定义状态，也无法用来渲染数据。

修改后的完整代码 #

脚本部分：

import { onMount } from 'svelte';

async function loadList() {
    // 改用更清晰的变量名避免混淆
    const response = await fetch('https://api.nal.usda.gov/fdc/v1/foods/list?dataType=Foundation&api_key=DEMO_KEY');
    const foodData = await response.json();
    console.log(foodData);
    return foodData; // 必须返回获取到的数组
}

// 如果需要预加载数据，保留onMount调用即可，不影响{#await}的使用
onMount(() => {
    loadList();
});

模板部分：

{#await loadList()} <!-- 注意要调用函数（加括号），不是引用函数本身 -->
    <p>Loading...</p>
{:then foodList}
    {#each foodList as item}
        <p>{item.description}</p>
    {/each}
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

额外说明 #

如果你想同时维护一个全局的foodList变量（比如后续要修改数据），可以调整函数逻辑：

import { onMount } from 'svelte';

let foodList;

async function loadList() {
    const response = await fetch('https://api.nal.usda.gov/fdc/v1/foods/list?dataType=Foundation&api_key=DEMO_KEY');
    foodList = await response.json();
    console.log(foodList);
    return foodList;
}

onMount(() => {
    loadList();
});

这样既可以通过全局变量访问数据，也能正常使用{#await}完成加载状态渲染。

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