Блог

Я пытаюсь создать приложение React с помощью хуков, с node.js экспресс-сервер и база данных PostgreSQL.
Первым шагом является регистрация пользователя, но я испытываю некоторые странности с axios (а также ошибка прокси, которая может быть или не быть связана?)

Желаемое поведение: пользователь заполняет все поля и нажимает кнопку Отправить, данные отправляются на серверную часть, сохраняются в базе данных и присваивается идентификатор пользователя, ответ возвращается на интерфейс и все поля очищаются.

Если пользователь отправляет неполную информацию, она не сохраняется, и ответ от серверной части выдает пользователю сообщение об ошибке.

Ситуация 1: Пользователь заполняет все поля.
Результат 1: поведение соответствует ожидаемому, ЗА ИСКЛЮЧЕНИЕМ
ТОГО, ЧТО (а) пользовательские данные также отображаются в строке поиска, включая пароль в виде обычного текста, и сохраняются после сохранения данных, например http://localhost:3000/?first=Lucyamp;last=Whoamp;email=who@example.comamp;password=something #/
(b) Следующая ошибка:

Ошибка прокси-сервера: не удалось запросить / зарегистрировать прокси-сервер с локального хоста: 3000 до http://localhost:5000 /. Видишь https://nodejs.org/api/errors.html#errors_common_system_errors для получения дополнительной информации (ECONNRESET).

[примечание: я использую create-react-app, 3000 — это порт, используемый сервером разработки, я использую 5000 для своего сервера]

Ситуация 2: Пользователь вводит неполную информацию и нажимает кнопку отправить.
Результат 2: Данные отображаются в строке поиска, как указано выше, и отправляются на серверную часть, поля ввода очищаются, но, по-видимому, ответа не возвращается и сообщение об ошибке не выдается.

Ситуация 2.1: пользователь снова отправляет ту же самую неполную информацию
Результат 2.1: срабатывает сообщение об ошибке.

Ситуация 2.2: пользователь отправляет различную неполную информацию
Результат 2.2: сообщение об ошибке очищается.

Код (прошу прощения, если этого слишком много / недостаточно, не будучи уверенным, в чем заключается проблема, немного сложно понять, что кому-то еще может понадобиться знать)

register.js

     import React, { useState } from "react";
import axios from "./axios";
import { Link } from "react-router-dom";

export default function Register() {
    const [error, setError] = useState(false);
    const [first, setFirst] = useState("");
    const [last, setLast] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

const formDeets = {
    first: first,
    last: last,
    email: email,
    password: password,
};

function submitReg() {
    console.log("formDeets", formDeets);

    axios
        .post("/register", formDeets)
        .then((response) => {
            console.log("response.data: ", response.data);
            clearAll();

            if (response.data.success) {
                console.log("success");
            } else {
                setError("true");
            }
        })
        .catch((err) => {
            console.log("register.js error in post register", err);
        });
}

function clearAll() {
    console.log("clear all called");
    setFirst("");
    setLast("");
    setPassword("");
    setEmail("");
}

return (
    <section className="register container">
        <div className="register-component">
            {error amp;amp; (
                <div className="error">
                    Registration failed. Please complete all fields and try
                    again.
                </div>
            )}
            <form>
                <label htmlFor="first">first name</label>
                <input
                    onChange={(event) => setFirst(event.target.value)}
                    type="text"
                    name="first"
                    placeholder="first name..."
                    value={first}
                />
                <label htmlFor="first">last name</label>
                <input
                    onChange={(event) => setLast(event.target.value)}
                    type="text"
                    name="last"
                    placeholder="last name..."
                    value={last}
                />
                <label htmlFor="email">email address</label>
                <input
                    onChange={(event) => setEmail(event.target.value)}
                    name="email"
                    type="email"
                    placeholder="email address..."
                    value={email}
                />
                <label htmlFor="password">choose a password</label>
                <input
                    onChange={(event) => setPassword(event.target.value)}
                    name="password"
                    type="password"
                    placeholder="choose a password..."
                    value={password}
                />
                submit
                <input
                    type="submit"
                    value="click to accept cookies and register"
                    onClick={() => submitReg()}
                />
            </form>


        </div>
    </section>
);}
 

server.js (я думаю, только соответствующая часть)

 app.post("/register", (req, res) => {
    console.log("/register route hit");
    console.log("req body", req.body);

const first_name = req.body.first;
const last_name = req.body.last;
const email = req.body.email;
const password = req.body.password;
let user_id;

if (!first_name || !last_name || !email || !password) {
    res.json({
        success: false,
    });
    return;
}

hash(password).then((hashpass) => {
    db.addUser(first_name, last_name, email, hashpass)
        .then((results) => {
            console.log("results", results.rows[0]);
            user_id = results.rows[0].id;
            req.session.userId = user_id;
            res.json({ success: true });
        })
        .catch((err) => {
            console.log("err in addUser: ", err);
            res.json({ success: false });
        });
    return;
});
}); //end of register route



server.listen(port, () => console.log(`listening on port ${port}`));
 

и, наконец, я вызываю axios из axios.js:

 import axios from "axios";

var instance = axios.create({
xsrfCookieName: "mytoken",
xsrfHeaderName: "csrf-token"
});

export default instance;
 

Браузеры ведут себя по умолчанию при отправке формы.

Это заставляет браузер переходить к новому URL-адресу после запуска вашего JS.

Вам необходимо предотвратить поведение этого события отправки по умолчанию.

 onClick={() => submitReg()}
 

Похоже, здесь нет никаких причин использовать функцию стрелки. submitReg не использует this , поэтому привязка this с помощью функции со стрелкой бессмысленна.

 onClick={submitReg}
 

Теперь вашей функции будет передан объект события. Используйте его, чтобы остановить поведение отправки формы по умолчанию.

 function submitReg(evt) {
    evt.preventDefault();
    console.log("formDeets", formDeets);