Svelte应用控制台可打印接口数据但浏览器无法渲染问题

核心问题原因 #

两个基础逻辑错误导致渲染异常，和Svelte响应式机制本身无关：

• 初始值类型完全不匹配：你定义let data = []给的初始值是空数组，但后端接口返回的是带bodies属性的对象结构，不是数组。
• 渲染时机和判断逻辑冲突：Svelte组件会在script同步代码执行完后立刻完成首次渲染，此时异步fetch请求还处于pending状态，data还是初始的空数组：
  • 用{#if data.length}做判断时，空数组的length为0，条件不成立；等请求返回data被赋值为对象后，对象没有length属性，值为undefined转布尔值仍为false，if块永远不会执行，所以页面空白也不报错。
  • 直接换成{#if data.bodies.length}时，首次渲染阶段data是空数组，不存在bodies属性，读取undefined的length直接抛出Cannot read properties of undefined错误；你在控制台能打印出正确数据，是请求成功后回调里的逻辑，执行时机晚于首次渲染。

修复步骤 #

1. 把data的初始值改成和接口返回结构对齐，避免首次渲染时读取不存在的属性：

<script>
// 初始结构和接口返回保持一致
let data = {
  bodies: []
}

async function initFetchSolarSystemData() {
 let response = await fetch("http://127.0.0.1:5000/solar-system/gravity");
 data = await response.json();

 console.log("data", data)
 console.log(["id", data.bodies[0].id])
 console.log(["gravity", data.bodies[0].gravity])
 console.log(["bodies", data.bodies.length])
}

initFetchSolarSystemData()
</script>

2. 修正模板判断逻辑，可选增加加载态优化体验：

<section>
    {#if data.bodies.length}
        {#each data.bodies as item}
            <div class="gravity">
              <!-- 注意：id为页面全局唯一属性，循环中不要写固定id，可改为动态值如id="gravity-{item.id}" -->
              <h1>
                {item.gravity}
              </h1>
            </div>
        {/each}
    {:else}
      <p>天体数据加载中...</p>
    {/if}
</section>

改完之后首次渲染时data.bodies是空数组，判断条件不成立会显示加载提示，等请求返回数据后Svelte检测到data更新，会自动触发重新渲染，遍历bodies列表展示对应重力数值。

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