主页 / coding / 问题 / 79430557
Accepted
Alex
Asked: 2025-02-11 23:47:25 +0800 CST

Svelte 子组件的 props 不会因父组件状态改变而更新

  • 772

父组件：

<script>
    import Child from "./Child.svelte"
    import { onMount } from "svelte";
    import apireq from "./api.js";
    
    let items = $state.raw([]);

    let splitItems = $derived(items.splice(0, 5));

    onMount(() => {
        apireq().then(v => items = v)
    })
</script>
<h1>item count in parent {items.length}</h1>
<Child items={splitItems} />

子组件

<script>
  let props = $props();
  let { items} = props;
</script>

item count in child:
<div>{items.length}</div>

api 请求后子组件不会更新..仍然显示 0 计数父级确实更新。

我尝试了和$state。$state.raw但我不希望完全反应，因为它是一个很大的数组，而分配时的反应应该足够了

这在 svelte 4 中曾经非常简单，但在 5 中没有任何效果如预期 :(

javascript

2 个回答

  1. Best Answer

    您需要$derived或只是$props()直接解构：

    let props = $props();
let { items } = $derived(props);

// or

let { items } = $props();

    （此外，使用从中splice删除项目违反了纯度。不应修改 中的状态。）$state$derived$derived

    • 0

  2. 问题似乎出在 Svelte 5 中 $derived 的工作方式。由于 splitItems 派生自 items.splice(0, 5)，因此它不会被动更新，因为 splice 会改变数组而不是返回新数组。请尝试使用切片：

    让 splitItems = $derived(() => items.slice(0, 5));

    这可确保 splitItems 在项目更改时更新。此外，请确保您传递了反应式存储或在子级中正确使用了 $state。如果这有帮助，请告诉我！

    • 0

相关问题