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：错误消息清除。代码 （抱歉，如果这太多/不够，不确定问题出在哪里，使得弄清楚其他人可能需要知道的内容变得有点棘手）注册.jsserver.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 routeserver.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);