主页 / coding / 问题 / 79195227
Accepted
helmi77
Asked: 2024-11-16 21:19:31 +0800 CST

Svelte 5 表单数据在提交处理程序中不具有响应性

  • 772

我正在尝试在 Svelte 5 中实现表单提交操作，但似乎遇到了一些反应性问题。

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

正如预期的那样，{formData.name}显示正确的值，但无论我在表单中输入什么，console.log(formData)始终都会输出。我如何在提交处理程序中检索最新的值？abc

svelte

1 个回答

  1. Best Answer

    代理$state不会改变底层对象，它们在其上记录变化，因此如果您记录它，您将看到代理的目标没有改变。

    控制台中甚至应该出现警告，指引您使用$inspect或$state.snapshot获取状态的当前值。

    您的console.log包含$state代理。考虑使用$inspect(...)或$state.snapshot(...)代替

    在大多数情况下，代理可以像任何其他对象一样处理，例如，如果您希望JSON.stringify它通过 发送fetch，那应该可以。但有些 API 和第三方代码无法处理代理，在这种情况下，应该传递快照。

    • 1

相关问题