异步初始值

假设您想从 API 获取一些数据并将其用作表单的初始值。

虽然这个问题表面上看起来很简单，但其中也隐藏着您可能尚未想到的复杂性。

例如，您可能希望在数据正在获取时显示加载旋转器，或者您可能希望优雅地处理错误。同样，您也可能想寻找一种缓存数据的方法，这样就不必在每次渲染表单时都获取数据。

虽然我们可以从头开始实现其中许多功能，但这最终会与我们维护的另一个项目非常相似：TanStack Query。

因此，本指南将向您展示如何将 TanStack Form 与 TanStack Query 结合使用以实现所需行为。

基本用法

svelte

<script>
  import { createForm } from '@tanstack/svelte-form'
  import { createQuery } from '@tanstack/svelte-query'

    const { data, isLoading } = createQuery(() => ({
      queryKey: ['data'],
      queryFn: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return { firstName: 'FirstName', lastName: 'LastName' }
      },
    }))

    const form = createForm(() => ({
      defaultValues: {
        firstName: $data?.firstName ?? '',
        lastName: $data?.lastName ?? '',
      },
      onSubmit: async ({ value }) => {
        // Do something with form data
        console.log(value)
      },
    }))
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else}
  <!-- form... -->
{/if}

<script>
  import { createForm } from '@tanstack/svelte-form'
  import { createQuery } from '@tanstack/svelte-query'

    const { data, isLoading } = createQuery(() => ({
      queryKey: ['data'],
      queryFn: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return { firstName: 'FirstName', lastName: 'LastName' }
      },
    }))

    const form = createForm(() => ({
      defaultValues: {
        firstName: $data?.firstName ?? '',
        lastName: $data?.lastName ?? '',
      },
      onSubmit: async ({ value }) => {
        // Do something with form data
        console.log(value)
      },
    }))
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else}
  <!-- form... -->
{/if}

这将显示一个加载旋转器，直到数据获取完成，然后渲染带有获取到的数据作为初始值的表单。

基本用法

订阅 Bytes

订阅 Bytes