Next.js中React表单数据入库与条件渲染问题求助

问题根源 #

你遇到的核心问题是：按钮同时设置了type="submit"和onClick事件，onClick会优先触发并更新isSubmitted状态，导致组件重新渲染时表单被卸载，浏览器因此中断表单提交流程，抛出“Form submission canceled because the form is not connected”错误，最终数据没存入数据库。

正确实现方案 #

按以下步骤修改代码，确保数据入库、状态更新、提示显示三个逻辑同时生效：

1. 移除按钮的onClick事件：将状态更新逻辑统一放到表单的onSubmit处理函数中。
2. 正确处理表单默认行为：在handleSubmit中先调用event.preventDefault()，阻止浏览器默认的表单跳转。
3. 请求成功后再更新状态：确保数据成功存入数据库后，再切换isSubmitted状态显示感谢提示。

代码示例 #

contact/index.js 中的 MessageFlow 组件

import { useState } from 'react';
import MessageForm from './MessageForm';

export default function MessageFlow() {
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = async (event) => {
    // 阻止浏览器默认表单提交行为
    event.preventDefault();

    // 收集表单数据
    const formData = new FormData(event.target);
    const payload = Object.fromEntries(formData);

    try {
      // 提交数据到API接口
      const response = await fetch('/api/messageForm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (response.ok) {
        // 仅当请求成功时切换状态
        setIsSubmitted(true);
      } else {
        console.error('消息提交失败，请重试');
      }
    } catch (err) {
      console.error('提交请求出错:', err);
    }
  };

  return (
    <div>
      {isSubmitted ? (
        <div>thank you</div>
      ) : (
        <MessageForm onSubmit={handleSubmit} />
      )}
    </div>
  );
}

MessageForm 组件

export default function MessageForm({ onSubmit }) {
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" placeholder="你的姓名" required />
      <input type="email" name="email" placeholder="你的邮箱" required />
      <textarea name="message" placeholder="留言内容" required />
      {/* 仅保留type="submit"，移除onClick */}
      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• 表单的提交逻辑必须绑定到<form>的onSubmit事件，而不是按钮的onClick，这样能确保捕获完整的表单提交事件。
• 之前出现的TypeError: note.preventDefault is not a function，是因为错误地传递了非事件对象给handleSubmit，现在通过表单onSubmit传递原生事件对象即可解决。
• 加入try/catch和response.ok判断，能处理请求失败的情况，避免用户看到错误的感谢提示。

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