Question

我正在用reactjs和express js和sequilize做一个登录应用程序，当我用邮递员api测试它时一切正常，但是当我用reactjs尝试它时，它在后端给了我这个问题

Unhandled rejection Error: WHERE parameter "userName" has invalid "undefined" value
    at MySQLQueryGenerator.whereItemQuery

这是我的登录组件

import React, { Component } from 'react'
import'./login.css'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
userName: '',
password : '',

        }
    }
    handleChange = (e) => {
        this.setState({ [e.target.name] : e.target.value});
    }
    handleSubmit = (e) => {
        e.preventDefault();

fetch('http://localhost:4000/login',{
  method: 'POST',
  headers: {
    'Accept': 'application/json,text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    userName: this.state.userName,
    password: this.state.password,

  }),

});


      }





  render() {

    return (
      <React.Fragment>
        <div className="login-card">
    <h1>Inventory Management App</h1>
  <form onSubmit={this.handleSubmit}>
    <input value={this.state.userName} onChange={this.handleChange} type="text" name="userName" placeholder="Username"/>
    <input value={this.state.password} onChange={this.handleChange} type="password" name="password" placeholder="Password"/>
    <input type="submit" name="login" className="login login-submit" value="login"/>
  </form>

</div>

      </React.Fragment>
    )
  }
}
export default Login

这是后端中的代码

const express = require('express');

const User = express.Router();

const bcrypt = require('bcrypt');

const user = require('../Models/user');

function loginRouteHandler(req, res) {
  user.findOne(
    {
      where: {
        userName: req.body.userName,
      },
    },
  )
    .then((data) => {
      if (bcrypt.compareSync(req.body.password, data.password)) {
        req.session.userName = req.body.userName;
        req.session.password = req.body.password;
        console.log(req.session);
        res.redirect('/');
      } else {
        res.send('user doesnt exists');
      }
    });
}




User.route('/login').post(loginRouteHandler);

module.exports = User;

这是模型

const db = require('../Db_connection/dbconnect');

const user = db.sequilize.define('user', {
  id: {
    type: db.Sequilize.INTEGER,
    primaryKey: true,
  },
  userName: {
    type: db.Sequilize.STRING,
    primaryKey: true,
  },
  password: {
    type: db.Sequilize.STRING,
    primaryKey: true,
  },
}, {
  freezeTableName: true,
  timestamps: false,
});
module.exports = user;

编辑添加了app.js

const express = require('express');

const session = require('express-session');

const cors = require('cors');

const app = express();

app.use(cors());

const bodyParser = require('body-parser');

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
}));
app.use(bodyParser.urlencoded({ extended: false }));

// parse application/x-www-form-urlencoded

const user = require('./Controller/User');

const port = 4000;

app.use('/', user);

app.listen(port);

我也使用axios api尝试过，但是我不工作

Answer 1

您只有app.use(bodyParser.urlencoded({ extended: false }));，但您将参数作为json body: JSON.stringify({...})传递。尝试添加app.use(bodyParser.json())。

查看文档以了解更多详细信息：express request object，body-parser

未处理的拒绝错误：WHERE参数“ userName”具有无效的“ undefined”值（填充错误）

1 个答案: