我正在试用NextJs的这个新功能,记录了here
当action根本没有收到任何参数时,基本示例就会起作用.
但我想知道如何将参数传递给服务器操作.
// someForm.tsx
import { experimental_useFormState as useFormState } from 'react-dom';
import submit from '@/app/actions';
// passing the action as the first argument
const [_formStatus, formAction] = useFormState(submit, {
message: '',
});
// jsx
<form
action={formAction}
>
<input
aria-label='email address'
value='foo'
type='text'
placeholder='Enter your email'
/>
<Button type='submit' pendingMessage='Sending...'>Contact Us</Button>
</form>
如前所述,此操作不需要任何参数并且有效
// app/actions
// what if I'd wanted submit to have arguments from the form?
export default async function submit() {
console.log('submitting');
try {
await new Promise<void>((res) => {
setTimeout(() => {
res();
}, 2000);
});
revalidatePath('/');
return { message: 'Thanks!' };
} catch (e) {
console.error(e);
return { error: 'Error' };
}
}
我try 添加类型为FormData
的参数,但不起作用
export default async function submit(formData: FormData) {
没有与此调用匹配的重载. 重载%1,共%2,‘(action:(State:FormData)=>;Promise,InitialState:FormData,permarink?:STRING|UNDEFINED):[State:FormData,Dispatch:()=>;void]’,出现以下错误. 类型为‘(formData:FormData)=>;Promise<;{Message:字符串;Error?:未定义;}|{Error:字符串;Message?:未定义;}>;’的参数不能赋给类型为‘(State:FormData)=>;Promise’的参数. 类型‘Promise<;{消息:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}>;’不可分配给类型‘Promise’. 类型‘{Message:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}’不能赋值给类型‘FormData’. 类型""FormData""中缺少以下属性:Append、Delete、Get、Get、GetAll等. 重载2,共2,‘(操作:(状态:FormData,有效负载:未知)=>;Promise,InitialState:FormData,永久链接?:字符串|未定义):[状态:FormData,调度:(有效负载:未知)=>;空]’,出现以下错误. 类型‘(formData:FormData)=>;Promise<;{Message:字符串;Error?:未定义;}|{Error:字符串;Message?:未定义;}>;’‘类型的参数不能赋给类型’(State:FormData,有效负载:未知)=>;Promise‘的参数. 类型‘Promise<;{消息:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}>;’不可分配给类型‘Promise’.ts(2769)