在 Svelte 5 中将反应性道具传递给孩子们

Question

我真的很难理解 Svelte 5 中的反应性。

我创建了一个小类来封装数据获取操作：

class DataResponse {
  data = $state([]);
  error = $state();
  isLoading = $state(false);
}

还有一个

useFetchData

帮助器，它启动获取并返回此类的实例（在收到响应时通过重新分配

data

进行更新）。

export function useFetchData() {
  const resp = new DataResponse();

  async function fetchData() {
    resp.isLoading = true;
    try {
      const response = await fetch("https://randomuser.me/api/?results=5");
      const j = await response.json();

      resp.data = j.results;
      resp.error = undefined;
    } catch (err) {
      resp.error = err;
      resp.data = undefined;
      console.error(err);
    } finally {
      resp.isLoading = false;
    }
  }

  fetchData();
  return resp;
}

如果我直接在调用站点使用此数据，反应性将按我的预期工作，并且当 API 调用返回时 UI 会更新。

<script>
    import { useFetchData } from "./useFetchData.svelte.js";

    const resp = useFetchData();  
</script>

{#each response.data as person}
    <div>{person.name.first} {person.name.last}</div>
{/each}

当我将 UI 逻辑提取到单独的组件中并尝试将此数据作为 prop 传递给子组件时，我失去了反应性，并且 UI 永远不会更新。我做错了什么？

<script>
    import { useFetchData } from "./useFetchData.svelte.js";

    const resp = useFetchData();  
</script>

<People people={rest.data} />

我在操场上准备了一个最小的例子：https://svelte.dev/playground/455ad944b0cd42fdbee891a488ad372f?version=5.19.0

Answer 1

props 语法已关闭，您将获得 all props 作为对象。应该是：

let { people } = $props();