使用ReactJS将formData发送到Express API，并获取响应的JSON

Question

试图让ReactJS前端通过代理将用户名和密码从表单发送到我的express api，然后让api中的app.post返回用户id的JSON文件。代理连接正常，但当我将用户名和密码状态发送到api时，它在另一端显示为"未定义"。不确定这是否是我的处理程序、事件代码/表单或我的express API的问题。

ReactJS:

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"
var recID = []
export default class Login extends Component {
constructor() {
super()
this.state = {
isLoggedIn: false,
username: "",
password: "",
user: []
}
this.checkLogin = this.checkLogin.bind(this)
this.handleUsernameChange = this.handleUsernameChange.bind(this)
this.handlePasswordChange = this.handlePasswordChange.bind(this)
}
handleUsernameChange = (e) => {
this.setState({username: e.target.value});
}
handlePasswordChange = (e) => {
this.setState({password: e.target.value});
}
checkLogin(e) {
e.preventDefault()
fetch('/api/login', {
method: 'POST',
body: JSON.stringify({"user": this.state.username, "pass": this.state.password}),
headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(user_id => this.setState({user: user_id}))
recID = recID.concat(this.state.user)
if (recID.length == 6) {
this.setState({isLoggedIn: true})
}
}
loginScreen() {
return(   
<div style={{border:"none"}}>
<div style={{background:"white"}}>
<br></br>
<center><Header /></center>
<br></br>
</div>
<br></br>
<br></br>
<div style={{background:"white"}}>
<center><form onSubmit={e => this.checkLogin(e)}>
<br></br>
Username: <br></br>
<input type = "text" name= "username" onChange={this.handleUsernameChange}></input>
<br></br>
<br></br>
Password: <br></br>
<input type = "text" name = "password" onChange={this.handlePasswordChange}></input>
<br></br>
<br></br>
<input type = "submit" value = "Log-in"></input>
<br></br>
</form></center>
<br></br>
</div>
</div>
)
}
success() {
return (
<div>
<p>TEST</p>
{this.state.user && this.state.user.map(us => <div key={us.user_id}> {us.user_id} </div>)}
</div>
)
}
render() {
if (this.state.isLoggedIn == true) {
return (
this.success()
)
}
else {
return (
this.loginScreen()
)
}
}
}

相关NodeJS API代码：

'use strict'
const express = require('express')
const bodyParser = require('body-parser')
const users = require('./modules/user_management.js')
const app = express()
const port = 8080
app.use(bodyParser.urlencoded({extended: false}))
app.post("/api/login", async(req, res) => {
const id = await users.login(req.body.user, req.body.pass)
console.log(id)
res.json(id)
})
app.listen(port, () => console.log(`Server is listening on port ${port}`))

Answer 1

在Node.js文件中，确保添加：

app.use(bodyParser.json());

因为它目前只设置为解析url编码的输入。

此外，如果这不起作用，请尝试删除fetch函数中的JSON.stringify，因为我不确定这是否有必要，因为您已经在使用body解析器了。

编辑-无论如何，我错了。JSON.stringify应该保留在原始的fetch调用中。

如果这两个都不起作用，请告诉我，我很乐意提出一些额外的建议。

干杯，Gabe