我正在试用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)=&gt;Promise,InitialState:FormData,permarink?:STRING|UNDEFINED):[State:FormData,Dispatch:()=&gt;void]’,出现以下错误. 类型为‘(formData:FormData)=&gt;Promise&lt;{Message:字符串;Error?:未定义;}|{Error:字符串;Message?:未定义;}&gt;’的参数不能赋给类型为‘(State:FormData)=&gt;Promise’的参数. 类型‘Promise&lt;{消息:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}&gt;’不可分配给类型‘Promise’. 类型‘{Message:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}’不能赋值给类型‘FormData’. 类型""FormData""中缺少以下属性:Append、Delete、Get、Get、GetAll等. 重载2,共2,‘(操作:(状态:FormData,有效负载:未知)=&gt;Promise,InitialState:FormData,永久链接?:字符串|未定义):[状态:FormData,调度:(有效负载:未知)=&gt;空]’,出现以下错误. 类型‘(formData:FormData)=&gt;Promise&lt;{Message:字符串;Error?:未定义;}|{Error:字符串;Message?:未定义;}&gt;’‘类型的参数不能赋给类型’(State:FormData,有效负载:未知)=&gt;Promise‘的参数. 类型‘Promise&lt;{消息:字符串;错误?:未定义;}|{错误:字符串;消息?:未定义;}&gt;’不可分配给类型‘Promise’.ts(2769)

推荐答案

您可以通过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");
  // ...
}

S以官方的例子作为参考.

Reactjs相关问答推荐

For循环中的元素在Reaction中丢失挂钩

导致useState中断的中断模式

为多租户SSO登录配置Azure AD应用程序

禁止直接访问Next.js中的页面,同时允许从应用程序内部访问

对搜索引擎优化来说,react 头盔的异步足够了吗?

如何在React组件中自动更新图表数据?

定位数组中的一项(React、useState)

MERN,将动态列表中的元素插入数组

在添加了useplacesautocomplete后,在构建React/Next.js项目时,NPM抛出类型期望的错误

这个简单的React组件为什么会多次渲染?

onChange in useEffect 的最佳实践

将 clerk 与 supabase 集成的最佳实践

我收到Uncaught TypeError: props.handleSelect is not a function

React - 拖放 UML

React Native Realm 应用程序在发布构建后崩溃

如何定制 React 热 toastr ?

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

理解 React 中的 PrevState

你如何使用 refs 访问 React 中映射子项的值?

运行开发服务器时如何为 Vite 指定运行时目录