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

Question

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

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

如果用户提交的信息不完整，则不会存储该信息，并且后端的响应会向用户触发一条错误消息。

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

代理错误：无法将请求/注册从 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

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绑定是没有意义的。thisonClick={submitReg}现在您的函数将传递一个事件对象。使用它来停止表单提交的默认行为。function submitReg(evt) {     evt.preventDefault();         console.log("formDeets", formDeets);