Axios 后体空带快递

Question

我正在尝试将两条文本数据从我的 React 前端发送到 Express 后端，但是每当我使用 Axios 执行 post 命令时，正文在后端显示为 {}，我无法使用它。

我的代码如下：

客户端（App.js）：

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

function App() {

  const [cocktailName, setCocktailName] = useState("");
  const [cocktailMain, setCocktailMain] = useState("");

  const submitRecipe = () => {
    const recipeData = {"cocktailName": cocktailName, "cocktailMain": cocktailMain};
    Axios.post('http://localhost:3001/api/insert', recipeData).then(() => {alert('successful insert');});
  }

  return (
    <div className="App">
      <h1>CRUD Application Test</h1>
      <div className='InputForm'>
      <label> Cocktail Name: </label>
      <input type="text" name="Cocktail Name" onChange={(e)=> 
      {setCocktailName(e.target.value);}}/>
      <br></br>
      <label> Cocktail Main Ingredient: </label>
      <input type="text" name="Cocktail Main Ingredient" onChange={(e)=> {
      setCocktailMain(e.target.value)}}/>
      <br></br>
      <button onClick={submitRecipe}>Submit</button>
      </div>

    </div>
  );
}

export default App;

服务器（App.js）：

const app = express()
const mysql = require('mysql')
const bodyParser = require('body-parser')
const cors = require('cors')

const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'cruddatabase'
});

app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));

app.post('/api/insert', (req, res)=> {
    console.log(req.body)
    const cocktailName = req.body.cocktailName;
    const cocktailMain = req.body.cocktailMain;
    console.log(cocktailName)
    console.log(cocktailMain)
    //This is where i'll eventually insert it into a database
    const sqlInsert = "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)"
    // db.query(sqlInsert, [cocktailName, cocktailMain], (err, result) => {
    //     console.log(err)
    // });
});

app.listen(3001, () => {
    console.log("running on port 3001")
});

非常感谢任何帮助

Answer 1

你需要在这个块中的某个地方有一个res.send()

app.post('/api/insert', (req, res)=> {
    console.log(req.body)
    const cocktailName = req.body.cocktailName;
    const cocktailMain = req.body.cocktailMain;
    console.log(cocktailName)
    console.log(cocktailMain)
    //This is where i'll eventually insert it into a database
    const sqlInsert = "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)"
    // db.query(sqlInsert, [cocktailName, cocktailMain], (err, result) => {
    //     console.log(err)
    // });
});

Answer 2

更改此行：

app.use(bodyParser.urlencoded({extended: true}));

对此：

app.use(express.json());

Axios 发送 JSON 当您提供 object 作为数据而不像您一样指定Content-Type时。 所以urlencoded不是这里的正确设置。

Answer 3

首先要从后端获得响应，您需要自己指定要接收的内容，您可以通过执行以下操作将响应发送为 json ： res.json("...") 。 您应该将...更改为您想要返回的任何响应。 如果你想取回你的数据，你可以把它放在那里。 您也可以在请求完成后执行res.send("...")发送消息

其次，你需要让你的后端接受 json 数据，方法是在app变量后面添加这个。 app.use(express.json());

最后，我鼓励你异步 function 让你的代码看起来更干净。 您可以将您的发布请求代码更改为类似的内容，并让我知道它是否有效。

app.post("/api/insert", async (req, res) => {
  try {
    const { cocktailName, cocktailMain } = req.body;
    const sqlInsert = await "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)";
  } catch (e) {
    console.log(e.message);
  }
});