Next.js 14使用Server Action时表单属性警告问题咨询

警告原因解析 #

当你把Server Action函数直接作为表单的action属性时，React会自动为这个表单配置提交所需的method（默认是POST）和encType，完全不需要手动指定。你现在在<form>标签里加了method="post"，这属于冗余配置——React会直接覆盖这个手动设置的值，所以抛出警告提醒你没必要加这些属性。

修复步骤 #

直接删掉表单上的method="post"就行，修改后的组件代码如下：

import { makeAction } from "./action";

export default function About() {
  return (
    <div className="container mx-auto mt-10">
      <h1 className="text-4xl font-bold">Test me</h1>
      <form
        action={makeAction}
        className="space-y-2"        
      >
        <input
          type="text"
          placeholder="Firstname"
          className="input input-bordered w-full max-w-xs block"
          name="firstName"
        />
        <input
          type="text"
          placeholder="last name"
          className="input input-bordered w-full max-w-xs block"
          name="lastName"
        />
        <button type="submit" className="btn btn-primary block">
          Submit me
        </button>
      </form>
    </div>
  );
}

额外说明 #

• 绑定Server Action的表单，所有提交相关的协议细节（请求方法、编码类型）都由React/Next.js自动处理，手动设置这些属性不仅没用，还会触发警告。
• 你的makeAction函数已经正确标记了"use server"，无需改动，去掉多余的method属性后警告就会消失。

内容的提问来源于stack exchange，提问作者Islam Y-