Início / coding / Perguntas / 79195227
Accepted
helmi77
Asked: 2024-11-16 21:19:31 +0800 CST

Dados do formulário Svelte 5 não reativos no manipulador de envio

  • 772

Estou tentando implementar uma ação de envio de formulário no Svelte 5, mas parece que estou tendo alguns problemas com reatividade.

<script>
    const formData = $state({
        name: 'abc',
    })

    const saveData = (e) => {
        e.preventDefault()
        console.log(formData)
    }
</script>

<form onsubmit={saveData}>
    <input type="text" bind:value={formData.name}/>
    <button type="submit">
        Create
    </button>
</form>

<pre>
{formData.name}
</pre>

Como esperado, o {formData.name}exibe o valor correto, mas o console.log(formData)sempre emite abcnão importa o que eu insira no formulário. Como eu recuperaria o valor mais recente no manipulador de envio?

svelte

1 respostas

  1. Best Answer

    Os $stateproxies não alteram o objeto subjacente, eles registram as alterações sobre ele, então, se você registrar, verá o destino do proxy que não foi alterado.

    Deveria até haver um aviso no console, indicando o uso de $inspectou $state.snapshotpara obter o valor atual do estado.

    Seus proxies console.logcontidos $state. Considere usar $inspect(...)ou $state.snapshot(...)em vez disso

    Na maior parte, o proxy pode ser tratado como qualquer outro objeto, por exemplo, se você quiser que JSON.stringifyele o envie via fetch, isso deve funcionar. Mas há APIs e códigos de terceiros que não podem lidar com um proxy, nesses casos, deve-se passar um snapshot.

    • 1

relate perguntas