[英]Trying to pass data from react(front end) to node server(backend)
我试图将数据从我的反应端从onSubmit函数传递到我的节点/表达服务器。
控制台上和页面上仅显示“未定义”的数据均未显示。有人可以帮帮我吗? 谢谢!
App.js文件
class App extends Component {
constructor(props) {
super(props);
this.state = {
generalDetails: "Text",
fName: "Text",
mName: "Text",
LName: "Text",
gender: "Text"
};
this.onContentChange = this.onContentChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
render() {
return (
<div className="App">
<PageOne handleChange={this.onContentChange} />
<PageTwo handleChange={this.onContentChange} />
<PageThree handleChange={this.onContentChange} />
<PageFour handleChange={this.onContentChange} />
<PageFive handleChange={this.onContentChange} />
<PageSix handleChange={this.onContentChange} />
<Button onClick={this.onSubmitForm}>Submit Form</Button>
<br />
<br />
</div>
);
}
onSubmitForm = e => {
e.preventDefault();
let data = {
generalDetails: this.state.generalDetails,
firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName
};
axios
.post("http://localhost:5000/home", data)
.then(() => {
//do something
})
.catch(() => {
console.log("Something went wrong. Please try again later");
});
onContentChange(fieldname, data) {
console.log("On Content Change", data);
this.setState({
[fieldname]: data
});
}
}
export default App;
服务器
const express = require("express");
const app = express();
const port = 5000;
const cors = require("cors");
app.use(cors());
var bodyParser = require("body-parser");
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(
bodyParser.urlencoded({
// to support URL-encoded bodies
extended: true
})
);
app.get("/home", (req, res) => {
console.log("Hello from .get /home", req.body.generalDetails );
})
app.post("/home", (req, res) => {
const data = [{ generalDetails: req.body.generalDetails }];
res.json(data);
});
app.listen(port, () => `Server running on port ${port}`);
您的问题非常模糊,因此我将只看您的代码就尽我所能。 您从哪里得到不确定的? 您在哪里尝试登录控制台? 并且您在浏览器控制台和/或节点控制台中遇到任何错误吗? 这些是我对您的问题的疑问,但这是我认为您的问题所在。
如果您尝试从前端发送获取请求并尝试在以下位置接收该请求
app.get("/home", (req, res) => {
console.log("Hello from .get /home", req.body.generalDetails );
})
那么您需要从前端发送一个get请求,而不是发布请求。 现在,您的axios函数正在发出发布请求,因此它将在您的后端以发布路线而不是在get路线接收。
如果您要发送的是发布请求,那么您将在发布路线上收到请求,现在您的代码将回传generalDetials。 问题是您有一个空函数从服务器接收回请求。 无论您是发布帖子还是获得请求,都需要对这些信息进行处理。
因此,请执行以下操作,以便您了解正在发生的情况。 发出发布请求,然后将响应记录到浏览器控制台:
axios
.post("http://localhost:5000/home", data)
.then(result => {
console.log(result)
})
.catch(() => {
console.log("Something went wrong. Please try again later");
});
如果您在axios数据中重新获得了常规详细信息,那么您就可以成功地发出发布请求。
然后发出获取请求:
axios
.get("http://localhost:5000/home", data)
.then(result => {
console.log(result)
})
.catch(() => {
console.log("Something went wrong. Please try again later");
});
如果您正在节点控制台中记录信息,那么您将成功发出get请求。 因为在您的后端中,您只有在get路由中登录到控制台。
而且看起来您有语法错误。 您忘记了关闭onSubmitForm
函数。 您缺少右花括号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.