一个月后,这是我第二次在一个新项目上使用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
1条答案
按热度按时间kh212irz1#
像这样导入钩子: