如何在Svelte文件中使用+page.js返回的数组数据？

以下是几种常见的排查和解决思路：

1. 确保load函数中data被正确解析为数组（处理异步操作） #

如果你的data是通过异步请求（比如fetch）获取的，必须用await等待请求完成，否则返回的data会是一个Promise对象，而非数组。

错误示例：

// +page.js
export function load() {
  // 这里返回的是Promise，不是数组
  const data = fetch('/api/items').then(res => res.json());
  return { props: { data } };
}

正确写法：

// +page.js
export async function load() {
  const res = await fetch('/api/items');
  const data = await res.json();
  // 兜底处理，确保返回的是数组
  const safeData = Array.isArray(data) ? data : [];
  return { props: { data: safeData } };
}

2. 给组件中的data设置默认数组值 #

初始渲染时，如果load函数还未完成，data可能处于undefined状态，这时候会被判定为非数组。给data设置默认数组可以避免这个问题：

<!-- +page.svelte -->
<script>
  // 设置默认值为数组，确保初始状态符合预期
  export let data = [];
</script>

3. 检查load函数的返回结构 #

确认你没有不小心将data包裹在额外的对象层级中。比如错误地返回了嵌套对象，导致组件收到的data是对象而非数组：

错误示例：

// +page.js
export async function load() {
  const list = [1, 2, 3];
  // 错误：将数组放在了data.list里，组件收到的data是对象
  return { props: { data: { list } } };
}

正确写法：

// +page.js
export async function load() {
  const data = [1, 2, 3];
  return { props: { data } };
}

4. 调试确认实际数据类型 #

通过日志打印，确认data在load函数和组件中的实际类型，定位问题环节：

在+page.js中添加日志：

export async function load() {
  const res = await fetch('/api/items');
  const data = await res.json();
  console.log('load函数中的data:', data, '是否为数组:', Array.isArray(data));
  return { props: { data } };
}

在+page.svelte中添加日志：

<script>
  export let data;
  console.log('组件收到的data:', data, '是否为数组:', Array.isArray(data));
</script>

查看控制台输出，就能清楚是数据在哪个环节变成了非数组类型。

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