Отправка данных формы с помощью ReactJS в Express API и ответ на JSON

Question

Попытка получить интерфейс ReactJS для отправки имени пользователя и пароля из формы в мой Express API через прокси, а затем заставить app.post в API возвращать файл 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()
                )
            }
    }
}

Соответствующий код API NodeJS:

'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-ввода.

Кроме того, если это не работаетпопробуйте удалить JSON.stringify из функции fetch, поскольку я не уверен, что это необходимо, так как вы уже используете body-parser.

EDIT - Неважно, я ошибся.JSON.stringify следует оставить в исходном вызове выборки.

Если ни одна из этих двух работ не работает, дайте мне знать, и я был бы рад выдвинуть некоторые дополнительные предложения.

CheersГейб