使用 React 使用 Axios 将表单数据从前端发送到后端

Question

我正在尝试从表单字段中获取用户的输入并访问我的后端 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;

Answer 1

您错误地使用了useEffect()函数。
正确处理输入元素状态。
要将数据发送到服务器，您可以使用 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;

Answer 2

好的，这是你的代码有什么问题：

hooks 只能放置在功能组件的第一层（在任何 sub-functions 之外）并且必须在任何 return 语句之前。
使用效果会在渲染时触发，在您的代码中，您似乎想在事件点击时触发它。

如果我是你，我会这样做：

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;

变化：

我使用 useCallback 来记住函数
我使用 async/await 而不是链式承诺（看起来更干净）

使用 React 使用 Axios 将表单数据从前端发送到后端

Sending Form Data From Frontend to Backend Using Axios Using React

reactjs

forms

axios