小编Ale*_*lex的帖子

如何在 Nextjs 13 服务器端组件中提交后清除表单?

我不知道如何在服务器端组件提交后清除表单字段,因为它无法使用挂钩。提交工作正常,但似乎在调用完成后无法清除字段。这里怎么解决这个问题呢?

我在此应用程序中有一个向 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)

next.js next.js13

3
推荐指数
1
解决办法
4132
查看次数

标签 统计

next.js ×1

next.js13 ×1