将数据从 React 发送到 Node 后端

Question

我正在构建一个 React 和 Node 应用程序，我正在尝试将数据从 React 发送到 Node 并在控制台中打印。这是我的代码：

反应代码：

import React, { Component } from 'react';
import axios from 'axios';

class Test extends React.Component {
constructor(props) {
  super(props);
  this.state = { name: 'Serban' };
  this.tick = this.tick.bind(this);
}

tick() {
   console.log(this.state.name);
   const article = { n: this.state.name };
axios.post('http://localhost:3001/api', article)
}

componentDidMount() {
// Simple POST request with a JSON body using axios

   
}

render() {
   return(
<div>
<button onClick={this.tick}>Send</button>
</div>
   );
}

}

export default Test;

节点代码：

const express = require("express");
const router = express.Router();
const axios = require('axios');
const cors = require("cors");



const PORT = process.env.PORT || 3001;

const app = express();
app.use(cors())


app.post('/api', function(req, res) {

var nume = req.body.n;
console.log("Salut " + nume);

});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});

我收到这个错误：

Server listening on 3001
TypeError: Cannot read property 'n' of undefined
at C:\react-efactura\server\index.js:16:23
at Layer.handle [as handle_request] (C:\react- 
efactura\node_modules\express\lib\router\layer.js:95:5)
at next (C:\react-efactura\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\react-efactura\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\react- 
efactura\node_modules\express\lib\router\layer.js:95:5)
at C:\react-efactura\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\react- 
efactura\node_modules\express\lib\router\index.js:335:12)
at next (C:\react-efactura\node_modules\express\lib\router\index.js:275:10)
at cors (C:\react-efactura\node_modules\cors\lib\index.js:188:7)
at C:\react-efactura\node_modules\cors\lib\index.js:224:17

我做错了什么？我尝试了用谷歌搜索的不同内容，但 none 有效。它似乎设法完成了来自 React 的请求，但它没有t send the value. Why doesn发送值？

Answer 1

奇怪的是，Node 不会自动使 req.body 可用。您必须手动添加一个中间件来解析来自浏览器的传入数据，并构造 req.body 然后才能使用。多年来，一直使用 body-parser 模块，现在 Express 4.16+ 可以直接使用 app.use(express.json());

一些有趣的读物：https://medium.com/@mmajdanski/express-body-parser-and-why-may-not-need-it-335803cd048c

将数据从 React 发送到 Node 后端

Sending data from React to Node backend

javascript

post

node.js

express

reactjs