假设您需要从 API 获取数据并将其作为表单的初始值。
虽然这个问题表面看起来简单，但背后可能存在您尚未考虑的隐藏复杂性。
例如，您可能希望在数据加载时显示加载动画，或者需要优雅地处理错误情况。同样，您可能还需要寻找缓存数据的方法，以避免每次渲染表单时都重新获取数据。
虽然我们可以从头实现这些功能，但最终代码会与我们维护的另一个项目 TanStack Query 非常相似。
因此，本指南将展示如何结合使用 TanStack Form 和 TanStack Query 来实现所需的行为。
import { useForm } from '@tanstack/react-form'
import { useQuery } from '@tanstack/react-query'
export default function App() {
const {data, isLoading} = useQuery({
queryKey: ['data'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return {firstName: 'FirstName', lastName: "LastName"}
}
})
const form = useForm({
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 (
// ...
)
}
import { useForm } from '@tanstack/react-form'
import { useQuery } from '@tanstack/react-query'
export default function App() {
const {data, isLoading} = useQuery({
queryKey: ['data'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return {firstName: 'FirstName', lastName: "LastName"}
}
})
const form = useForm({
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 (
// ...
)
}
这段代码会在数据加载时显示加载提示，待数据获取完成后，将使用获取到的数据作为初始值渲染表单。
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.