异步初始值

异步初始值

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

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

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

虽然我们可以从头开始实现许多这些功能，但最终它会看起来很像我们维护的另一个项目：TanStack Query。

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

基本用法

tsx

import { createForm } from '@tanstack/solid-form'
import { createQuery } from '@tanstack/solid-query'

export default function App() {
  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)
    },
  }))

  if (isLoading) return <p>Loading..</p>

  return null
}

import { createForm } from '@tanstack/solid-form'
import { createQuery } from '@tanstack/solid-query'

export default function App() {
  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)
    },
  }))

  if (isLoading) return <p>Loading..</p>

  return null
}

这将显示一个加载指示器，直到数据被获取，然后它将使用获取的数据作为初始值来渲染表单。

基本用法

订阅 Bytes

订阅 Bytes