Estoy tratando de enviar dos piezas de datos de texto desde mi interfaz React a un backend Express, pero cada vez que hago el comando de publicación con Axios, el body aparece como {} en el backend y no puedo usarlo. Mi código se encuentra a continuación.
Cliente (Aplicación.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;Servidor (Aplicación.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") });Se agradece enormemente cualquier ayuda.
Cambia esta línea:
app.use(bodyParser.urlencoded({extended: true}));Con este:
app.use(express.json()); Axios envía un JSON cuando proporciona un objeto como datos sin especificar el Content-Type como lo hizo. Entonces urlencoded no es el conjunto correcto aquí.
necesita tener un res.send() en algún lugar dentro de este bloque
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) // }); });En primer lugar, para obtener una respuesta de su backend, debe especificar qué recibir usted mismo, puede enviar la respuesta como json haciendo: res.json("...") . Debe cambiar el ... a cualquier respuesta que desee obtener. Y si desea recuperar sus datos, puede ponerlos allí. También puede hacer res.send("...") para enviar un mensaje después de que se completó la solicitud
En segundo lugar, debe permitir que su backend acepte datos json agregando esto después de la variable de la app . app.use(express.json());
Por último, lo alentaría a usar la función asíncrona para que su código se vea más limpio. Puede cambiar su código de solicitud de publicación a algo como esto y avíseme si funciona.
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); } });