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

Question

尝试让 ReactJS 前端通过代理将用户名和密码从表单发送到我的 express api，然后让 API 中的 app.post 返回一个用户 ID 的 JSON 文件。代理连接工作正常，但是当我将用户名和密码状态发送到 API 时，它在另一端显示为“未定义”。不确定这是否是我的处理程序、事件代码/表单或我的快速 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());

因为它目前仅设置为解析 urlencoded 输入。

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

编辑 - 没关系，我错了。 JSON.stringify 应该保留在原始的 fetch 调用中。

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

干杯， 加布