Início / coding / Perguntas / 79430557
Accepted
Alex
Asked: 2025-02-11 23:47:25 +0800 CST

Os componentes filhos do Svelte não são atualizados na mudança do estado pai

  • 772

Componente pai:

<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} />

Componente filho

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

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

O componente filho não é atualizado após a solicitação da API. Ainda mostra contagem 0. O componente pai é atualizado.

Eu tentei com ambos $statee $state.raw. Mas eu não quero reatividade total porque é uma matriz grande, e a reatividade na atribuição deve ser suficiente

Isso costumava ser muito simples no Svelte 4, mas no 5 nada funciona como esperado :(

javascript

2 respostas

  1. Best Answer

    Você precisa $derivedou apenas desestruturar $props()diretamente:

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

// or

let { items } = $props();

    (Além disso, usar splicepara remover itens de $statein $derivedviola a pureza. Não se deve modificar o estado em $derived.)

    • 0

  2. Parece que o problema está em como $derived funciona no Svelte 5. Como splitItems é derivado de items.splice(0, 5), ele não será atualizado de forma reativa porque splice muta o array em vez de retornar um novo. Tente usar slice em vez disso:

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

    Isso garante que splitItems seja atualizado quando os itens forem alterados. Além disso, certifique-se de que você está passando um armazenamento reativo ou usando $state corretamente no filho. Me avise se isso ajudar!

    • 0

relate perguntas