React中向Contact Form API提交数据失败问题求助

问题根源 #

1. 表单默认提交行为未阻止：点击type="submit"按钮时，浏览器会自动触发表单默认提交动作，跳转到action="#"指向的本地地址，导致你的fetch请求被打断。
2. API请求格式不匹配：你写死了测试用的URL参数，没有动态带入用户输入的表单值，且API预期是URL查询参数格式，你却用了POST请求加JSON body，和要求不符。
3. 变量声明顺序问题：jsonData用var声明在handleClick之后，虽var会变量提升，但代码逻辑存在隐患，易导致未定义错误。
4. 多余字段未处理：表单中的website字段设置了required，但API预期参数里没有这个字段，会导致用户必须填写但数据不会被发送。

修复后代码 #

import React from 'react';

const ContactForm = (props) => {
  const { submitBtnClass } = props;

  const handleSubmit = (e) => {
    // 阻止表单默认提交跳转
    e.preventDefault();

    // 动态构建符合要求的API查询参数
    const params = new URLSearchParams({
      secret: 'f1794e34-ac40-46a0-9c81-d48a1322f4bb',
      fname: props.fname,
      email: props.email,
      mobile: props.phone,
      message: props.message
    });

    // 发送匹配API预期格式的请求
    fetch(`https://edu.orgiance.com/api/contactus?${params}`, {
      method: 'GET',
      mode: 'cors'
    })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => {
      console.log('提交成功:', data);
      // 可添加提交成功后的逻辑，比如重置表单、提示用户
    })
    .catch(error => {
      console.error('提交出错:', error);
      // 处理错误，比如提示用户
    });
  };

  return (
    <form id="contact-form" onSubmit={handleSubmit}>
      <div className="row">
        <div className="col-md-6 mb-30">
          <input 
            className="from-control" 
            type="text" 
            id="name" 
            name="name" 
            placeholder="Name" 
            value={props.fname}  
            required 
          />
        </div>
        <div className="col-md-6 mb-30">
          <input 
            className="from-control" 
            type="email" 
            id="email" 
            name="email" 
            placeholder="E-Mail" 
            value={props.email} 
            required 
          />
        </div>
        <div className="col-md-6 mb-30">
          <input 
            className="from-control" 
            type="tel" 
            id="phone" 
            name="phone" 
            placeholder="Phone Number" 
            value={props.phone} 
            required 
          />
        </div>
        <div className="col-md-6 mb-30">
          <input 
            className="from-control" 
            type="text" 
            id="website" 
            name="website" 
            placeholder="Your Website" 
          />
        </div>
        <div className="col-12 mb-30">
          <textarea 
            className="from-control" 
            id="message" 
            name="message" 
            placeholder="Your message Here" 
            value={props.message}
            required 
          ></textarea>
        </div>
      </div>
      <div className="btn-part">
        <button 
          className={submitBtnClass ? submitBtnClass : 'readon learn-more submit'}   
          type="submit"
        >Submit Now</button>
      </div>
    </form>
  );
}

export default ContactForm;

关键修改说明 #

• 阻止默认行为：通过e.preventDefault()彻底避免表单跳转，确保fetch请求正常执行。
• 动态参数构建：用URLSearchParams自动处理参数编码，避免手动拼接URL的错误。
• 匹配API请求方式：根据你给出的预期调用格式改用GET方法（若API实际接受POST，可调整为POST并将参数放入body，需和后端确认）。
• 规范输入类型：将email、phone的input类型改为email、tel，提升表单验证和用户体验。
• 处理多余字段：去掉website的required属性，因为API不需要该参数。

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