如何调试 Axios 前端 POST (React) 到后端 express POST？控制台显示请求为 POST 和状态 200

Question

浏览器：Safari 文本编辑器：VS CODE 前端框架：Reactjs 后端设置：Express.js

问题：触发onClick调用事件后，我在前端有一个Axios post请求。我无法调试正文中发送的数据，也不知道为什么它没有传到后端。

截图显示代码：（不是红色的断点。我不确定在哪里使用的好地方debugger;

这是 onClick 事件的代码

这是 Express 端口 8000 上的后端代码运行

这是 Safari 和正在提交的表单的屏幕截图。在控制台中是响应。如您所见，它显示为 post 请求类型和状态 200。该数据的 None 转移到后端 SQL 数据库。

请注意，在上面的屏幕中，object 被渲染了多次。那是因为为了让这段代码在控制台中显示结果，我更改了这个函数。

对此:(虽然根据反应，上面是正确的方法，并且只会在触发 onclick 事件时触发一次函数。下面的方法不需要 onclick 事件。

以下是对所有请求设置断点时显示的数据。请注意，当它应该是 POST

时，它似乎是 GET 请求

请注意，这是一个 POST 请求。只有在更改 onclick 函数时才会发生这种情况。

如能就此事提供任何帮助，我们将不胜感激。我知道我已经接近解决这个问题了，但是，我对 React 和 CRUD 还是很陌生。

Answer 1

所以您的后端没有处理从前端发出的请求。如果您想查看数据，请尝试在您的服务器中执行此操作。在发送响应之前，您需要处理前端发出的请求。下面的代码只是解构了请求体，所以你不必写很多行代码。单击提交按钮后，您应该会看到前端输入正在后端控制台上弹出。您当前正在尝试发送未处理的请求。如果你想说根据请求向前端发送一些东西，你会做类似的事情 res.json({nameOfThing: valueOfTheThing"}) AFTER HANDLING THE REQUEST。

app.post("/", (req, res)=>{
   const {email, name, question} = req.body
   console.log(`Your Email is ${email} and your name is ${name} and your ${question}`)
})

数据应该出现在您的控制台中。我实际上已经写了一篇关于如何做这样的事情的博客。请随时查看。 https://dev.to/gbudjeakp/how-to-connect-your-node-express-backend-with-your-react-front-end-post-610

如何调试 Axios 前端 POST (React) 到后端 express POST？控制台显示请求为 POST 和状态 200

How do I debug Axios frontend POST (React) to backend express POST? Console shows request as POST and status 200

crud

node.js

express

reactjs

axios