我不知道如何在服务器端组件提交后清除表单字段,因为它无法使用挂钩。提交工作正常,但似乎在调用完成后无法清除字段。这里怎么解决这个问题呢?
我在此应用程序中有一个向 API 提交数据的表单:
页面.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 /> …Run Code Online (Sandbox Code Playgroud)