為什么在使用ReactuseState時會在onsubmit事件上清除有效負載資料？這是對服務器端的POST請求

背景：我試圖讓我的前端代碼與我的后端代碼連接。
采取的步驟：

-- 為提交按鈕的點擊事件設定斷點：這會隨著事件被觸發而回傳，但是沒有 Promise 函式運行并且控制臺中沒有回應。--tested 將 Postman 上的資料發送到后端并獲得狀態 200 并正常作業（后端設定正確并托管在 heroku 上）--清理 POST 請求并將其設定為承諾并存盤在常量變數中

代碼采取的步驟：

• 首先在每個輸入欄位（姓名、電子郵件、問題）中輸入字串。
• 使用 react usestate hook 使用當前狀態并將 event.target.value 設定為這些值。
• 存盤后，它將存盤在名為 custData 的變數中
• 單擊一個提交按鈕，它呼叫使用 Axios 存盤 POST 請求的 Promise 函式的變數（我認為這是發生其他事情的地方）*POST 設定為正確的后端 URL，其值應該是 custData細繩。然后它應該在控制臺中回傳 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 格式發送似乎存在問題）

**有關此主題的任何進一步幫助將不勝感激。**

uj5u.com熱心網友回復：

我認為問題在于您的 Axios 電話后。

Axios 是這樣使用的：

Axios.post('ENDPOINT_URL', BODY)

這里的 ENDPOINT_URL 是您要向其發送發布請求的 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

標籤：反应 邮政 公理 使用状态

上一篇：ssl與post請求的通信問題

下一篇：有沒有辦法防止Guzzle在POST請求中將[]附加到具有多個值的欄位名稱？