React, Node: переменная показывает неопределенное в app.post () - PullRequest
0 голосов
/ 18 ноября 2018

Не уверен, правильно ли я это сделал на стороне сервера или клиента, но на стороне клиента, когда я вижу console.log (значения), они появляются, но на сервере я получаю undefined . Но когда я ввожу правильные учетные данные для пользователя в базе данных, я получаю статус: хорошо, значит, что-то найдено. А также дополнительная ошибка: я не могу отправить запрос дважды, затем я получаю сообщение об ошибке: Error: Cannot enqueue Handshake after invoking quit.

Код клиента:

class Login extends React.Component {

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    const email = data.get('email');
    const password = data.get('password');

    fetch('/authentication', {
        method: 'POST',
        body: JSON.stringify({
            "email": email,
            "password": password
        }),
    }).then(function (response) {
        if (response.ok) {
            alert("Login Successful!");
        } else {
            console.log("Failed");
        }
    });
    console.log("Email: " + email);
    console.log("pwd: " + password);
}

render() {
    return (
        <form className="col s12 m12 l12" onSubmit={this.handleSubmit}>
            <div className="row">
                <div className="col s12 center-align">
                    <img className="logo" src="images/bibdata-center.png" alt="BibData Logo"/>
                </div>
                <div className="input-field col s12">
                    <i className="material-icons prefix">email</i>
                    <input id="email" name="email" type="email" className="validate" onChange={this.handleEmailChange}/>
                    <label htmlFor="email">Email</label>
                </div>
            </div>
            <div className="row">
                <div className="input-field col s12">
                    <i className="material-icons prefix">lock</i>
                    <input id="password" name="password" type="password" className="validate" onChange={this.handlePasswordChange}/>
                    <label htmlFor="password">Password</label>
                </div>
            </div>
            <div className="row">
                <div className="col s12 m6 l6 center-align">
                    <button className="btn waves-effect btn-large waves-light" type="submit" value="Submit" name="action">Sign in
                        <i className="material-icons right">send</i>
                    </button>
                </div>
                <div className="col s12 m6 l6 center-align">
                    <button className="btn waves-effect btn-large waves-light blue" type="submit" name="action"
                            onClick={() => renderReactComponent(newUser, 'root')}>
                        Register
                    </button>
                </div>
            </div>
            <div className="row">
                <div className="col s12 center-align">
                    <a href="#" onClick={() => renderReactComponent(forgotPassword, 'root')}>
                        <span className="helper-text grey-text text-darken-1"
                              data-error="wrong" data-success="right">
                            Forgot password?
                        </span>
                    </a>
                </div>
            </div>
        </form>
    );
}
}

и код сервера:

app.post('/authentication', function (req, res) {
  connection.connect();
  let email = req.body.email;
  let password = req.body.password;

  console.log(email);
  console.log(password);

  connection.query('SELECT * FROM user WHERE email = ? AND password = ?', 
    [email, password], function (error, results, fields) {
    if (error) {
        return res.status(500).send(error);
    }
    return res.send({ error: false, data: results, message: 'ok'})
  });
  connection.end();
});

Вся помощь будет оценена!

1 Ответ

0 голосов
/ 18 ноября 2018

Когда вы делаете fetch вызов конечной точки / аутентификации, вы отправляете сериализованные данные JSON в теле запроса. Однако сервер не имеет возможности узнать, что вы действительно отправили JSON. При публикации JSON вы должны указать это, предоставив соответствующий заголовок типа контента.

В этом случае ваши параметры извлечения (2-й параметр) должны иметь еще одно свойство, подобное этому:

...
headers: {
    "Content-Type": "application/json",
},
...

Предполагается, что вы уже настроили анализатор тела или другой подобный модуль в коде на стороне сервера, который может анализировать тело запроса JSON.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...