typescript Next.js useFormStatus问题

sczxawaw  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(142)

一个月后,这是我第二次在一个新项目上使用next.js的服务器操作,尽管代码似乎是正确的,但我得到了这个错误:

TypeError: (0 , react_dom__WEBPACK_IMPORTED_MODULE_2__.useFormStatus) is not a function

表单组件:

"use client"
import { sendEmail } from '@/actions/sendEmail'
import React from 'react'
import SubmitButton from './SubmitButton'

export default function ContactInner({contact}: {contact: any}) {
  return (
    <section className="w-full items-center justify-center flex flex-col px-4 pb-28 2xl:pt-12 py-8">
        <div className='w-[min(100%,38rem)] flex flex-col text-center gap-4'>
        <h1 className='text-3xl md:text-4xl font-semibold'>{contact.title}</h1>
        <p className='text-neutral-700 dark:text-neutral-400'>
        {contact.descriptionpart1}{" "}
          <a className='underline' href='mailto:[email protected]'>
            [email protected]
          </a>
        {" "}{contact.descriptionpart2}
        </p>

        <form
        className='mt-4 flex flex-col'
        action={async formData => {
          await sendEmail(formData)
        }}
        >
          <input name='senderEmail' className='px-4 h-14 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' type="email" required maxLength={100} placeholder={contact.inputplaceholder}/>
          <textarea name='message' className='p-4 h-52 my-3 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' required maxLength={5000} placeholder={contact.textareaplaceholder}/>
          <SubmitButton buttonLabel={contact.buttonLabel}/>
        </form>
        </div>
    </section>
  )
}

所以我有这个表单,使用resend发送电子邮件,它工作,所以我试图有一个挂起/加载状态,并创建了一个按钮元素,像这样:

"use client"

import React from 'react'
import { useFormStatus } from 'react-dom'
import { FaPaperPlane } from 'react-icons/fa'

export default function SubmitButton({buttonLabel}: {buttonLabel: any}) {
  const { pending } = useFormStatus()
  return (
  <button 
    className="focus:scale-110 hover:scale-110 active:scale-105 group flex gap-2 items-center justify-center h-[3rem] w-[8rem] 
    rounded-full bg-gray-900 hover:bg-gray-950 dark:bg-slate-200 dark:hover:bg-slate-300 outline-none transition-all 
    duration-200 text-white dark:text-black" 
    type='submit'>
        {buttonLabel}
      <FaPaperPlane className="transition duration-200 text-xs opacity-80 group-hover:-translate-y-1 group-hover:translate-x-1"/>
  </button>
  )
}

所以问题是当我做const { pending } = useFormStatus(),我得到上面提到的错误,我可以看到useFormStatus是导入的,但idk为什么我得到错误,可能是一个新的更新?如果有人知道原因,请帮忙。Thanks in advance

kh212irz

kh212irz1#

像这样导入钩子:

import { experimental_useFormStatus as useFormStatus } from 'react-dom'

相关问题