SvelteKit中#each循环仅显示数组最后一项问题排查

问题原因 #

1. 数组赋值逻辑错误：你在循环里执行examples = response.data[i].name，每次循环都会把原本的数组examples直接替换成单个字符串（当前循环项的name值），循环结束后examples只会保留最后一个name。当#each遍历字符串时，会把字符串拆成单个字符逐个渲染，这就是出现单个字母逐行显示的原因。
2. 模板变量误用：在#each块里你用了{examples}而不是当前循环项{example}，就算数组正确，也会重复显示整个数组内容而非单个项。

解决办法 #

修正JS逻辑

直接提取所有name到数组，或者用push方法正确添加元素（Svelte响应式要求数组操作需触发更新，若push后页面无变化，可通过重新赋值数组触发）。

推荐简洁写法：

let examples = [];

onMount(async () => {
    const response = await fetch(
        "https://<my-api>/db/v1/cosmos/{container}",
        {
            method: "POST",
            headers: {
                "<api-key>": "<my-api-key>",
            },
            body: JSON.stringify({
                query: "SELECT * FROM c ORDER BY c.name ASC",
            }),
        }
    ).then(res => res.json());

    // 直接提取所有name到数组
    examples = response.data.map(item => item.name);
});

若坚持用循环，需改为push操作：

// 循环内代码替换为
examples.push(response.data[i].name);
// 若push后页面未更新，可重新赋值数组触发响应式
// examples = [...examples];

修正模板代码

在#each块里使用当前循环项example，而非原数组examples：

{#each examples as example}
    <ListgroupItem class="text-base font-semibold gap-2">
        Name: {example} <br />
    </ListgroupItem>
{/each}

验证效果 #

修改后，API返回的所有name会被正确存入数组，#each循环遍历数组每个元素，页面将显示所有name项，而非最后一项或单个字母。

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