使用React使用Axios將表單資料從前端發送到后端

我正在嘗試在表單欄位中從用戶那里獲取輸入并訪問我的后端 server.js 中的資料。我想使用這些資料將引數傳遞給我正在使用的 Yelp Fusion API。我知道我可以為此使用 axios，但目前不確定如何完成此操作。

這是我的 server.js：

const express = require('express')
const dotenv = require('dotenv').config()
const port = process.env.PORT || 5000
var axios = require('axios');

const app = express()

var cors = require('cors');
app.use(cors());

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

//     var config = {
//         method: 'get',
//         url: 'https://api.yelp.com/v3/businesses/search?location=Houston',
//         headers: { 
//           'Authorization': 'Bearer <API_KEY>
//         }
//       };
      
//       axios(config)
//       .then(function (response) {
//        //const data = JSON.stringify(response.data);
//        res.json(response.data)
//       })
//       .catch(function (error) {
//         console.log(error);
//       });

// })




app.listen(port, () => console.log(`Server started on port ${port}`))

這是我需要將狀態從輸入欄位傳遞到后端的 App.js：

import React,{useEffect,useState} from 'react';
import './App.css';
import axios from 'axios'



function App() {

  const [zip,setZip] = useState("")


  function handleSubmit() {
    useEffect(() => {
      axios.post("http://localhost:8000")
      .then(res => {
        console.log(res)
      })
    })
  }

  // const [results, setResults] = useState({})
  // console.log(results)
  // useEffect(() => {
  //   axios.get('http://localhost:8000').then(res => {
  //     console.log(res)
  //   })
    
  // }, [])
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <input type="submit" value="Submit" />
    </form>
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

好的，這是您的代碼有什么問題：

1. 鉤子只能放在功能組件的第一層（任何子函式之外），并且必須在任何回傳陳述句之前。

2. 使用效果將在渲染時觸發，在您的代碼中看起來您想在事件點擊時觸發它。

如果我是你，我會這樣做：

function App() {
  const [zip,setZip] = useState("");

  const triggerAPI = useCallback(async () => {
    // Use async await instead of chained promise
    const res = await axios.post("http://localhost:8000", { zip: zip });
    console.log(res)
  }, [zip]);

  const handleSubmit = useCallback((e) => {
    e.preventDefault()
    triggerAPI();
  }, [triggerAPI])

  const handleChange = useCallback((event) => {
    setZip(event.target.value);
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          ZIP:
          <input type="text" value={zip} name="zip" onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;

變化：

1. 我使用 useCallback 來記憶函式
2. 我使用 async/await 而不是鏈式承諾（看起來更干凈）

uj5u.com熱心網友回復：

1. 你useEffect()錯誤地使用了函式。

2. 正確處理輸入元素狀態。

3. 要將資料發送到服務器，您可以使用axios.post(url,data).then()

import React, { useState } from "react";
import axios from "axios";

function App() {
  const [zip, setZip] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    axios.post("http://localhost:8000", { zip: zip }).then((res) => {
      console.log(res);
    });
  }

  const handleChange = (event) => {
    setZip(event.target.value);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          ZIP:
          <input type="text" value={zip} name="zip" onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}
export default App;

標籤：反应 形式 axios

上一篇：是否可以在一個腳本標簽中執行多個javascript？

下一篇：php中帶有switch陳述句的復選框