Tengo una aplicación React y uso Express para manejar mis consultas de base de datos.
Lo que quiero es pasar mi identificación de usuario almacenada en localstorage a una solicitud de publicación.
(Mi aplicación es básicamente un juego en el que los usuarios pueden obtener cartas para luchar contra otros jugadores y, para hacerlo, necesito actualizar mi base de datos cuando un usuario recibe una carta, por lo que intento hacer lo siguiente). Aquí está mi código:
import React, {useEffect, useState} from 'react'; import Axios from "axios"; import axios from "axios"; const Cards = () => { const [card, setCard] = useState([]); const id = localStorage.getItem("id"); console.log(id) // Output is 1 (correct) useEffect(() => { async function fetchData() { try { // Below, id should refer to localStorage.getItem("id") const res = await Axios.post('http://localhost:3001/getRandomCard', {id}) setCard(res.data) } catch (err) { console.log('error:', err) } } fetchData() }, []); return ( <div> <div> {card.map(aCard => <div className={"text-center"} key={aCard.name}> {aCard.name} <img alt={"Image de " + aCard.name} className={'activator'} src={'http://localhost/lfl/inc/img/players-ico/' + aCard.name} style={{width: '100%'}}/> </div>)} </div> </div>); }; export default Cards;Y en mi app.js:
app.post('/getRandomCard', async function (req, res) { const id = req.params.id; console.log('userid= ', id) // Output: undefined // ... })Soy muy nuevo en React, así que estoy probando cosas básicas, y tal vez mi código no sea la mejor manera de hacer lo que realmente estoy tratando de hacer, si es así, cada comentario es muy apreciado.
Con el método de publicación, en segundo lugar está el objeto con el 'cuerpo' de la solicitud. Entonces, sus datos no están en los parámetros, sino en el cuerpo.
Así que tienes que usar
const id = req.body.id;en vez de
const id = req.params.id;Si desea recibir una identificación usando parámetros, entonces debe modificar un poco su código
const res = await Axios.post(`http://localhost:3001/getRandomCard/${id}`)Y en el backend recibe el código como este,
app.post('/getRandomCard/:id', async function (req, res) { const id = req.params.id; console.log('userid= ', id) })