Svelte Native中通过Fetch请求实现列表视图展示问题求助

嘿，作为NativeScript新手遇到这种加载一直卡住的情况太正常啦！我帮你排查出了关键问题，咱们来一步步修正：

1. 核心问题：重复遍历导致逻辑冲突 #

你在<listView>上已经通过items="{data}"绑定了数据源，ListView本身会自动遍历这个数组并为每个项渲染Template。但你又在Template里加了{#each data as item}——这相当于让ListView再嵌套遍历一遍整个数组，直接打乱了渲染逻辑，导致页面一直停在等待状态。

2. 修正后的代码示例 #

模板部分（Svelte风格） #

{#await posts}
  <label text="Waiting"></label>
{:then data}
  <listView items="{data}" row="1" colSpan="2">
    <Template let:item>
      <!-- 直接使用Template传递的item即可，无需额外遍历 -->
      <label text="{item.id}. {item.body}" textWrap="true" />
    </Template>
  </listView>
{:catch err}
  <!-- 增加错误信息展示，方便调试 -->
  <label text="Error occurred: {err.message}" textWrap="true" />
{/await}

脚本部分 #

async function fetchPosts() {
  try {
    let allPosts = await fetch('https://jsonplaceholder.typicode.com/posts');
    // 新增HTTP状态检查，避免把非成功响应当成有效数据
    if (!allPosts.ok) {
      throw new Error(`请求失败，状态码：${allPosts.status}`);
    }
    return await allPosts.json();
  } catch (err) {
    console.error('获取数据出错:', err);
    // 抛出错误让模板的{:catch}捕获
    throw err;
  }
}

let posts = fetchPosts();

额外说明 #

• 去掉多余的{#each}后，ListView会正常遍历data数组，每个项通过let:item传递给Template，直接使用这个变量就能拿到当前项的id和body。
• 新增的错误检查和捕获能帮你快速定位问题（比如网络问题、API返回异常等），而不是一直卡在等待状态。

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