axios.post 在搜索栏中显示用户输入

Question

我正在尝试使用 Hooks、node.js express 服务器和 postgreSQL 数据库构建一个 React 应用程序。
第一步是用户注册，但我在使用 axios 时遇到了一些奇怪的问题（还有一个可能相关也可能不相关的代理错误？）

期望行为：用户填写所有字段并点击提交，数据被发送到后端，存储在数据库中并分配用户 ID，响应返回到前端并且所有字段都清除。

如果用户提交的信息不完整，它不会被存储，并且来自后端的响应会触发错误消息给用户。

情况 1：用户完成了所有字段。
结果 1：行为符合预期，除了
(a) 用户数据也出现在搜索栏中，包括纯文本密码，并在数据保存后持续存在，例如 http://localhost:3000/?first=Lucy&last=Who&email=who%40example.com&password=something#/
(b) 如下错误：

代理错误：无法将请求 /register 从 localhost: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： 错误消息清除。

---

代码（如果这太多/不够，请道歉，不确定问题出在哪里，这使得弄清楚其他人可能需要知道的内容有点棘手）

注册.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 && (
                <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.js 调用 axios：

import axios from "axios";

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

export default instance;

Answer 1

浏览器在您提交表单时具有默认行为。

这会导致浏览器在运行 JS 后导航到新的 URL。

您需要阻止该提交事件的默认行为。

---

onClick={() => submitReg()}

似乎没有任何理由在这里使用箭头函数。 submitReg 不使用 this，因此将 this 与箭头函数绑定是没有意义的。

onClick={submitReg}

---

现在您的函数将被传递一个事件对象。使用它来停止表单提交的默认行为。

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