我不知道如何在服务器端组件提交后清除表单字段,因为它不能使用挂钩。提交工作正常,但似乎没有办法清除字段后,调用完成。怎么解决这个喏?!
我在此应用程序中有一个向API提交数据的表单:
page.tsx:
import { Product } from '@/typings'
import Form from './components/Form'
export default async function Home() {
const res = await fetch('https://64c0eea9fa35860bae9fa770.mockapi.io/products', {
cache: 'no-cache',
next: {
tags: ['products']
}
})
const products: Product[] = await res.json()
return (
<main className="flex min-h-screen flex-col items-center justify-between text-3xl font-bold">
<h1 className='mt-2'> Product Warehouse</h1>
<h2 className='font-bold '>List of Products</h2>
<div className='flex flex-wrap '>
{products.map((product) => (
<div
key={product.id} className='p-5 shadow '>
<p>{product.product}</p>
<p>${product.price}</p>
</div>
))}
</div>
< Form />
</main>
)
}
字符串
这发生在:
serverActions.ts:
"use server"
import { Product } from "@/typings"
import { revalidateTag } from "next/cache"
export const addProductToDB = async (e:FormData) => {
const product = e.get("product")?.toString()
const price = e.get("price")?.toString()
if (!product || !price) return
const newProduct: Product = {
product: product,
price: price
}
await fetch('https://64c0eea9fa35860bae9fa770.mockapi.io/products', {
method: 'POST',
body: JSON.stringify(newProduct),
headers: { 'Content-Type': 'application/json'},
})
revalidateTag('products')
}
型
这就是形式本身:Form.tsx:
"use client"
import { addProductToDB } from "@/actions/serverActions"
function Form() {
return (
<form action={addProductToDB} id="myForm" className='flex flex-col gap-5 max-w-xl mx-auto p-5'>
<input type="text"
name='product'
placeholder='Enter Product Name'
className='border border-gray-300 p-2 rounded-md'
/>
<input type="text"
name='price'
placeholder='Enter Price'
className='border border-gray-300 p-2 rounded-md'
/>
{/* < AddButton /> */}
<button type="submit" className='border bg-blue-500 text-white p-2 rounded-md'>
Add
</button>
</form>
)
}
export default Form
型
1条答案
按热度按时间vwkv1x7d1#
选项1:您可以将整个表单字段转换为客户端组件,将整个表单 Package 在客户端组件中,然后将其作为页面的子项。这样,页面仍然是服务器组件,而表单本身是客户端组件。https://nextjs.org/docs/getting-started/react-essentials
选项2:使用react-hook-form包。示例设置如下:https://scastiel.dev/server-components-actions-react-nextjs的