Aquí está mi código React en la publicación:
const [nickname, setNickname] = useState('') const [title, setTitle] = useState('') const [content, setContent] = useState('') const [agree, setAgree] = useState(false) const [thepost, setThePost] = useState({}) const DoSubmit = async () => { setHasAlert(false) if (nickname == '' || nickname == null) { setAlertContent("Please enter a Nickname!") setHasAlert(true) return } if (title == '' || title == null) { setAlertContent("Please enter a Title!") setHasAlert(true) return } if (content == '' || content == null) { setAlertContent("Cannot post an empty content!") setHasAlert(true) return } if (agree == false) { setAlertContent("Please agree to the post rules!") setHasAlert(true) return } const data = { title: title, nickname: nickname, content: content } setThePost(data) await fetch('http://localhost:3001/posts', { method: "POST", body: thepost }) .then(res => { setIsError(false) setAlertContent("Posted Successfully!") setHasAlert(true) console.log(res) }) .catch(err => { setAlertContent(err.message) setHasAlert(true) }) }Y para mi backend Node/Express:
router.post('/', async(req,res) => { const post = new Post({ nickname: req.body.nickname, title: req.body.title, content: req.body.content }) console.log(req.body) try { const savedPost = await post.save() res.json(savedPost) console.log(savedPost) } catch(err){ res.json({message:err}) } }) Sin embargo, req.body está vacío en mi backend. Y en React, dice "¡Publicado con éxito!" y su estado es 200 (por lo que no hubo errores). Simplemente no se guarda y tampoco ve los datos que se enviaron desde React.
¿Algunas ideas? ¡Gracias!
Por cierto: en React, todos los campos (apodo, título, contenido) funcionan completamente en la interfaz.
ACTUALIZAR
Estoy usando /posts en reaccionar pero / en el nodo ya que ya usé un middleware en la aplicación principal del app.js como este:
const postsRoute = require('./routers/posts') app.use('/posts', postsRoute)Tengo una página de React que recibe todas las publicaciones:
const fetchData = async () => { const data = await fetch('http://localhost:3001/posts') const dataPost = await data.json() setAllPosts(dataPost) }Y todo funciona bien.
Esto parece estar fallando por tres razones separadas, cada una de las cuales causaría de forma independiente los síntomas que está describiendo.
datasetThePost(data) para actualizar el estadothepost al body El problema es que thepost es el valor anterior del estado. No obtendrá el nuevo valor hasta que el componente se vuelva a representar y se cree una nueva función DoSubmit , pero en ese momento ya es demasiado tarde: está trabajando con la función DoSubmit existente.
No uses el estado para esto. Simplemente use los datos inmediatamente.
fetch un objetoMire los documentos de MDN :
Cualquier cuerpo que desee agregar a su solicitud: puede ser un objeto Blob, BufferSource, FormData, URLSearchParams, USVString o ReadableStream
Un objeto simple no es ninguna de esas cosas.
Debe crear un objeto adecuado con URLSearchParams oFormData según el formato en el que el servidor espera los datos. También puede codificarlo como JSON (y establecer el encabezado de tipo de contenido correcto).
Ver los documentos expresos :
De forma predeterminada, no está definido y se completa cuando usa un middleware de análisis del cuerpo, como express.json() o express.urlencoded().
Debe incluir un middleware de análisis del cuerpo que coincida con el tipo de datos que eligió cuando reemplazó el objeto con algo adecuado en la sección anterior de esta respuesta.
La combinación de URLSearchParams y express.urlencoded() probablemente sea la más adecuada.
Está obteniendo de url: http://localhost:3001/posts en su código de reacción pero en el nodo js está usando router.post('/', async(req,res) pero debe usar router.post('/ post', async (req, res) en su lugar.
Vea en router.post que debe agregar publicaciones iguales a las que está usando para buscar.
Además, después de la corrección, intente recargar la página con fuerza o intente probar en modo de incógnito para obtener el cuerpo de solicitud vacío.