Блог

я создаю приложение для входа в систему с помощью reactjs и express js и sequilize, когда я тестирую его с помощью postman api, все работает, но когда я попробовал это с помощью reactjs, у меня возникла эта проблема в серверной части

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

вот мой компонент входа в react

 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, но у меня не работает

У вас есть только app.use(bodyParser.urlencoded({ extended: false })); но вы передаете свои параметры как json body: JSON.stringify({...}) . Попробуйте добавить app.use(bodyParser.json()) .

Проверьте документацию для получения более подробной информации: объект экспресс-запроса, body-parser