SvelteKit独立端点循环渲染问题：phones无法识别为对象

你的问题出在数据结构处理上：

• page/__data.json返回的是包含phones数组的外层对象，但你在load函数里直接把整个解析后的对象赋值给了phones变量，导致传递给组件的phones是个对象，而非可迭代的数组。{#each}指令只能循环数组这类可迭代结构，所以控制台会报错。

修正代码 #

只需要修改standalone.svelte里的load函数，从解析后的对象中取出真正的phones数组：

<script context="module">
    export const load = async ({ fetch }) => {
        const res = await fetch("page/__data.json", {
            headers: {
                "Accept": "application/json"
            }
        });
        const data = await res.json(); // 先接收完整的返回对象
        return {
            props: {
                phones: data.phones // 提取内部的phones数组作为props
            }
        }
    }
</script>

<script>
    export let phones;
</script>

{#each phones as phone}
   {phone.name}<br>
   {phone.price}<br>
{/each}

修改后，传递给组件的phones就是数组类型，{#each}可以正常循环渲染每一条手机数据了。

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