为什么在使用 React useState 时会在 onsubmit 事件上清除有效负载数据？这是对服务器端的 POST 请求

Question

背景：我正在尝试让我的前端代码连接到我的后端代码。
采取的步骤：

--为提交按钮的点击事件设置断点：这个 returns 事件被触发但是没有 Promise 函数运行并且控制台没有响应。 --tested 将 Postman 上的数据发送到后端并获得状态 200 并正常工作（后端设置正确并托管在 heroku 上） --清理 POST 请求并将其设置为承诺并存储在常量变量中

代码执行的步骤：

首先在每个输入字段（姓名、电子邮件、问题）中输入字符串。
使用 react usestate 挂钩使用当前状态并将 event.target.value 设置为这些值。
存储后，它会存储在名为 custData
单击一个提交按钮，它会调用存储 POST 使用 Axios 请求的 Promise 函数的变量（这是我相信发生其他事情的地方） *POST 设置为正确的后端 URL，其中 custData 的值应该是一个字符串。然后它应该 return 和 response.data 在控制台中，但没有。

下面是我的这个组件的前端反应代码：

import React from 'react';
 import {useState} from 'react';
 import Axios from 'axios'
 //import { response } from 'express';


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



  //This is the promise version 
  


   const custData =  
   { 
     "name" :name , 
    "email" :email , 
    "question":question
  } ;



  
    
    const submitPromise= () => {  
      console.log(custData);
      Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
      .then( (axiosResponse)=> { 
                       // here you can use the data 
                       console.log(custData);
                       const submitQuestions = axiosResponse.data;
                       console.log(submitQuestions);
                       })
                       
      .catch((e)=> {console.log(e)})
      
      }



    //this uses try catch however the backend is not getting hit with any data
    //tested this same request in Postman and it works 
    /*
    function submitQuestion() { 
      try {
       Axios.post('https://hookahsite-backend.herokuapp.com ' ,
      {
        name:name , 
        email:email , 
        question:question
        
      },
      )
      }
      catch (err) {console.error(err);}
        }
         
*/





     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
     
   }

   /*
   old way
      {()=>
    
    submitQuestion()
    
  }
  */

   >Submit </button>

   </form>

   ›


         </React.Fragment>

     )
 };

 export default QuoteForm;

（当我设置断点时，这是一个显示承诺存在的屏幕截图，似乎有一个问题是数据作为可能的文本而不是 json 格式发送）

** 任何有关此主题的进一步帮助将不胜感激。 **

Answer 1

我认为问题在于您的 Axios post 调用。

axios是这样使用的：

Axios.post('ENDPOINT_URL', BODY)

此处 ENDPOINT_URL 是您要向其发送 post 请求的 api 端点的 URL，但是您对 axios 说端点 url 是：

 'https://hookahsite-backend.herokuapp.com  || https://localhost:8000'

就我而言，axios 中没有逻辑，因此它试图用 post 请求按字面意思命中该字符串。

您应该将 OR 逻辑移动到应用程序的其他位置。

例如使用 env 变量知道你是运行本地或 heroku 你可以做这样的事情：

 let url;
 if (process.env.SERVER_LOCATION === "LOCAL") {
     url = "https://localhost:8000";
 } else{
     url = "https://hookahsite-backend.herokuapp.com";
 }
 axios.post(url, custData).then( // etc

为什么在使用 React useState 时会在 onsubmit 事件上清除有效负载数据？这是对服务器端的 POST 请求

Why when using React useState is the payload data clearing on a onsubmit event? This is a POST request to the server side

post

reactjs

axios

use-state