使用experimental_useFormState将参数传递给服务器操作

Question

我正在尝试这个新的 NextJs 功能，记录在这里

只要操作根本不接收任何参数，基本示例就会起作用。

但我想知道如何将参数传递给服务器操作。

  // 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' };
  }
}

我尝试添加类型为

FormData

的参数，但它不起作用

export default async function submit(formData: FormData) {

没有重载与此调用匹配。 重载 1 of 2, '(action: (state: FormData) => Promise, initialState: FormData, permalink?: string | undefined): [state: FormData,dispatch: () => void]'，给出以下错误。 类型“(formData: FormData) => Promise<{ message: string; error?: undefined; } | { error: string; message?: undefined; }>”的参数不可分配给类型“(state: FormData) => Promise”的参数。 类型“Promise<{ message: string; error?: undefined; } | { error: string; message?: undefined; }>”不可分配给类型“Promise”。 输入 '{ 消息：字符串；错误？：未定义； } | { 错误：字符串；消息？：未定义； }' 不可分配给类型“FormData”。 输入 '{ 消息：字符串；错误？：未定义； }' 缺少“FormData”类型中的以下属性：append、delete、get、getAll 等 7 个属性。 重载 2 of 2，'（操作：（状态：FormData，有效负载：未知）=> Promise，initialState：FormData，永久链接？：字符串 | 未定义）：[状态：FormData，调度：（有效负载：未知）=> void] '，给出了以下错误。 类型为“(formData: FormData) => Promise<{ message: string; error?: undefined; } | { error: string; message?: undefined; }>”的参数不可分配给类型为“(state: FormData，payload:known) => Promise”的参数。 类型“Promise<{ message: string; error?: undefined; } | { error: string; message?: undefined; }>”不可分配给类型“Promise”.ts(2769)

Answer 1

您可以通过

input

元素传递值。 您忘记的是给这些输入一个

name

属性。

//...
<input
  name="email"
  aria-label="email address"
  value="foo"
  type="text"
  placeholder="Enter your email"
/>

在操作中，您需要传递 FormData 和 prevState 参数：

export default async function submit(prevState, formData) {
  // getting your input value
  const email = formData.get("email");
  // ...
}

这里有一个官方的例子供参考。

Answer 2

官方示例https://github.com/vercel/next.js/tree/canary/examples/next-forms添加时出现错误Error: Cannot readproperties of undefined (reading 'get')。但是当您不使用 useFormState 时，一切正常。为什么我在使用 useFormState 时出现错误？