Next.js 14中如何向表单调用的Server Action传递变量？

你直接通过函数调用传参的写法不可行，先看对应的示例：

不可行写法 #

客户端组件 #

const companyID = 1;
return (
  <form action={test(companyID)}>
    ...
  </form>
)

服务器动作 #

export const test = async (formData: FormData, companyID) => {
  console.log(formData, companyID);
}

这种写法的问题在于：直接调用test(companyID)会立即执行Server Action，而非将其绑定为表单提交动作，额外参数也无法通过这种方式传递给提交触发时的Server Action。

仅传递FormData的可行写法 #

客户端组件 #

<form action={test}>
  ...
</form>

服务器动作 #

export const test = async (formData: FormData) => {
  console.log(formData);
}

传递额外变量的正确方法 #

如果需要传递companyID这类额外变量，可通过以下两种方式实现：

方法1：使用隐藏表单字段 #

在表单中添加隐藏的input元素，将变量值作为字段值传入，提交时会自动包含在FormData中：

客户端组件

const companyID = 1;
return (
  <form action={test}>
    <input type="hidden" name="companyID" value={companyID} />
    <!-- 其他表单元素 -->
    <button type="submit">提交</button>
  </form>
)

服务器动作

export const test = async (formData: FormData) => {
  const companyID = formData.get('companyID');
  console.log(formData, companyID);
}

方法2：用闭包装Server Action #

在客户端创建包装函数，通过闭包传入额外变量后再调用原Server Action：

客户端组件

'use client';
import { test } from '@/app/actions';

const companyID = 1;
const handleSubmit = async (formData: FormData) => {
  await test(formData, companyID);
};

return (
  <form action={handleSubmit}>
    <!-- 其他表单元素 -->
    <button type="submit">提交</button>
  </form>
)

服务器动作

export const test = async (formData: FormData, companyID: number) => {
  console.log(formData, companyID);
}

内容的提问来源于stack exchange，提问作者Drew Levine