React使用useState时表单提交POST请求payload数据清空问题求助

你当前的代码存在3个明确的可复现错误，按优先级修复即可解决请求无响应的问题：

1. 阻止表单默认提交行为 #

你的提交按钮是type="submit"属性，放在form标签内点击时会触发浏览器默认的表单提交、页面刷新逻辑，会直接中断刚触发的异步Axios请求，导致控制台没有后续输出。
修复方法：给提交函数添加事件参数，调用preventDefault()阻止默认行为：

const submitPromise= (e) => {  
  e.preventDefault()
  // 剩下的原有逻辑
}

2. 修正非法的请求URL #

你当前写的URL是字符串'https://hookahsite-backend.herokuapp.com || https://localhost:8000 '，字符串内的||不会被识别为JS逻辑判断，这是一个完全不合法的请求地址，自然无法发送请求。
修复方法：按环境判断选择对应请求地址，注意本地开发一般用http协议而非https：

const baseUrl = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:8000' 
  : 'https://hookahsite-backend.herokuapp.com'
Axios.post(baseUrl, custData)
// 测试阶段也可以直接写你Postman测通的单个地址即可

3. 关于请求数据格式的说明 #

你怀疑的文本/JSON格式问题不存在：Axios默认会自动将传入的对象参数转为JSON字符串，同时设置Content-Type: application/json请求头，只要你Postman测试时用的是JSON格式的请求体，就不需要额外修改。如果后端要求表单格式的请求，再手动调用qs.stringify(custData)转换并设置对应请求头即可。

修正后的完整组件代码 #

import React, { useState } from 'react';
import Axios from 'axios'

const QuoteForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [question, setQuestion] = useState("");

  const submitPromise = (e) => {  
    e.preventDefault();
    // 把custData移到函数内部，确保每次提交取的是最新的状态
    const custData = { 
      name: name, 
      email: email, 
      question: question
    };
    console.log('提交的数据：', custData);
    // 这里直接用Postman测通的Heroku地址测试，确认通了再改环境判断
    const baseUrl = 'https://hookahsite-backend.herokuapp.com';
    Axios.post(baseUrl, custData)
      .then((axiosResponse) => { 
        console.log('请求成功，返回数据：', axiosResponse.data);
      })
      .catch((e) => {
        console.log('请求失败，错误信息：', e);
      })
  }

  return(
    <React.Fragment>
      <form id="quoteForm">
        <h1 id="quoteTitle">Quote Help Form</h1>
        <p id="quotePar">Please provide your Name, Contact Email, and what products you would like more information about in this form :</p>

        <label id="formName" className="Form">
          Name:
          <input 
            type="text" 
            name="name" 
            onChange={(event) => { setName(event.target.value);}}
          />
        </label>

        <label id="formEmail" className="Form">
          Email:
          <input 
            type="text" 
            name="email" 
            onChange={(event) => { setEmail(event.target.value);}}
          />
        </label>
        <br/>
        <label id="formQuestion" className="Form" >
          What products would you like to know more about:
          <input 
            type="text" 
            name="help" 
            onChange={(event) => { setQuestion(event.target.value);}}
          />
        </label>

        <br/>
        <br/>

        <button 
          id="quoteSubmit" 
          type="submit" 
          onClick={submitPromise}
        >
          Submit 
        </button>
      </form>
    </React.Fragment>
  )
};

export default QuoteForm;

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