NextJS表单输入时自动提交刷新页面问题排查

核心问题1：客户端组件错误使用async声明 #

你的组件添加了'use client'标识，但同时将组件定义为async function——这是Next.js中的错误用法。客户端组件不能是异步函数，异步组件仅适用于服务器组件。这种矛盾会导致组件渲染逻辑异常，引发不必要的页面刷新或重复执行。

核心问题2：handleSubmit中未正确获取formData #

handleSubmit函数里直接使用了未定义的formData变量，会触发报错，进而导致浏览器执行默认表单提交行为（页面刷新）。

修复后的完整代码 #

'use client'
import React, { useState } from 'react';
import { OrganizationSettings } from "@/services/dataHelper";
import { ManageTeamSettings } from "@/services/teamSettings";

// 移除async，客户端组件不能是异步函数
export default function TeamSettingsFormTemp({ organizationSettings }: { organizationSettings: OrganizationSettings }) {

    const [teamOrganizationName, setTeamOrganizationName] = useState(organizationSettings.organizationAccountSettings?.teamName);
  
    async function updateTeamSettings(formData: FormData) {
        await ManageTeamSettings(formData); // 确保等待请求完成
    }

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      // 通过表单元素创建FormData
      const formData = new FormData(e.currentTarget);
      // 手动同步受控组件的state值到FormData
      formData.set('teamOrganizationName', teamOrganizationName);
      await updateTeamSettings(formData);
    };

    return (
      <>
      <form
        name="teamSettingsForm"
        id="teamSettingsForm"
        className=""
        onSubmit={handleSubmit}
      >
      <div className="grid grid-cols-12 gap-4 xxxxxl:gap-6">
        <div className="col-span-12 lg:col-span-6">
          <div className="box xxl:p-8 xxxl:p-10">
            <h4 className="h4 bb-dashed mb-4 pb-4 md:mb-6 md:pb-6">
              Account Settings
            </h4>
            <div className="mt-6 xl:mt-8 grid grid-cols-3 gap-4 xxxxxl:gap-6">
              <div className="col-span-2 md:col-span-2">
                <label
                  htmlFor="teamOrganizationName"
                  className="md:text-lg font-medium block mb-4">
                  Team/Organization Name
                </label>
                <input
                  type="text"
                  className="w-full text-sm bg-primary/5 dark:bg-bg3 border border-n30 dark:border-n500 rounded-3xl px-3 md:px-6 py-2 md:py-3"
                  id="teamOrganizationName"
                  name="teamOrganizationName"
                  placeholder="Team Name"
                  value={teamOrganizationName}
                  required
                  onChange={(e) => setTeamOrganizationName(e.target.value)}
                />
              </div>
            </div>
          </div>
        </div>
        <div className="col-span-12 lg:col-span-6">
        </div>
        <div className="col-start-3">
          &nbsp;
        </div>
        <div className="col-start-2 col-end-5">
          <button className="btn flex w-full justify-center" type="submit">
            Save Settings
          </button>
        </div>
      </div>
      </form>
      </>
    )
}

额外提示 #

• 因为是受控组件，表单的value绑定到了state，FormData不会自动同步state值，需要手动调用formData.set添加最新值。
• 建议在ManageTeamSettings内部添加错误处理，避免请求失败引发未捕获异常。

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