嘗試從我的NodeJSExpressAPI中的Reactjs檔案請求常量資料時出現未定義

我有一個名為 check-rates 的檔案，其中包含一些useStates()用戶將輸入的內容，以便我執行并使用 DHL API 為他們回傳發貨的估計值。

在我的 nodejs express 服務器中，我試圖訪問這些useStates()，req.body但是當我控制臺記錄常量時，我??總是將它們設定為未定義。我需要用戶輸入的這些值，以便 API 對于使用我的網站的每個客戶/用戶來說都是動態的，而不是固定值（就像我現在擁有的那樣。）

我究竟做錯了什么？

這是我的代碼：

檢查Rates.js：

const [fromCountires,setFromCountries] = useState("");
const [fromCountriesCode,setFromCountriesCode] = useState("");
const [fromCountriesCapital,setFromCountriesCapital] = useState("");
const [fromPostalCode,setFromPostalCode] = useState("");
const [toCountries,setToCountries] = useState("");
const [toCountriesCode,setToCountriesCode] = useState("");
const [toCountriesCapital,setToCountriesCapital] = useState("");
const [weight,setWeight] = useState("");
const [data,setData] = useState(null);

 const getRateEstimate = () => {
    
        axios.get('http://localhost:3001/api/dhl').then(response => {
            console.log(response)
            setData(response.data);
        }).catch(e => {
            console.log(e)
        });
    }

return (
 //example of how i am setting my needed useStates...
<Form.Group controlId="exampleForm.ControlInput1">
   <Form.Label className={'fw-bold'}>Weight</Form.Label>
   <Form.Control type="text" placeholder="" onChange={(e)=> {
     setWeight(e.target.value)}}/>
 </Form.Group>

  <button className={'btn-orange fw-bold py-2 px-3 px-4 rounded getRateBtn'}
  type={'submit'} onClick={getRateEstimate}> Check
  </button>
)

NodeJS 服務器

index.js：

app.get('/api/dhl', (req, res) => {

    const accountNum = req.body.accountNum
    const fromCountriesCode = req.body.fromCountriesCode
    const fromCountriesCapital = req.body.fromCountriesCapital
    const toCountriesCode = req.body.toCountriesCode
    const toCountriesCapital = req.body.toCountriesCapital
    const weight = req.body.weight
    const plannedShippingDate = req.body.date
    const len = "5"
    const width = "5"
    const height = "5"
    const isCustomsDeclarable = 'false'
    const unitOfMeasurement = 'metric'

    console.log(weight)//logs undefined
    console.log(fromCountriesCapital)//logs undefined

    var options = { method: 'POST',
    url: 'https://express.api.dhl.com/mydhlapi/test/rates',
    headers: 
     { 'postman-token': '',
       'cache-control': 'no-cache',
       authorization: 'Basic AUTH',
       'content-type': 'application/json' },
    body: 
     { customerDetails: 
        { shipperDetails: 
           { postalCode: '19010',
             cityName: 'Dubai',//need this
             countryCode: 'BH',//need this
             addressLine1: '0' },//end Shipper DETAILS
          receiverDetails: 
           { postalCode: '76321',
             cityName: 'Riyadh',//need this
             addressLine1: '0',
             countryCode: 'SA' }//end Reciever DETAILS
             },
       accounts: [ { typeCode: 'shipper', number: 'myAccountNumbeer' } ],
       plannedShippingDateAndTime: '2021-08-25T13:00:00GMT 00:00',//need thiss
       unitOfMeasurement: 'metric',
       isCustomsDeclarable: true,
       monetaryAmount: [ { typeCode: 'declaredValue', value: 10, currency: 'BHD' } ],
       requestAllValueAddedServices: false,
       returnStandardProductsOnly: false,
       nextBusinessDay: false,
       packages: [ { weight: 25, dimensions: { length: 5, width: 5, height: 5 } } ] },
    json: true };
  
  request(options, function (error, response, body) {
    if (error) throw new Error(error);
    res.send(body)
    console.log(body);
  });
});

uj5u.com熱心網友回復：

try {
   const res = await axios.get("/api/dhl", {
       data: {
            product: this.product
       }
   })
} catch (error) {
   console.log(error)
}

更多資訊

標籤：

上一篇：當推動mongodb始終只有5個元素時，只保留5個元素在陣列中洗掉最后一個元素

下一篇：將Auth0API保護的路由與Express路由處理程式一起使用