时间戳

首页 > 解决方案 > 如何在 Promise 响应中使用 IF 语句来呈现 React 组件

reactjs - 如何在 Promise 响应中使用 IF 语句来呈现 React 组件

问题描述

我正在使用护照本地猫鼬在我的数据库中注册用户。我正在使用 react-router 进行客户端渲染。在我的 Register.jsx React 组件中，一旦填写了用户名和密码输入并单击“注册”按钮，我将调用以下函数：

    function submitUser() {
        Axios.post("http://localhost:4000/register", {
            username: registerUsername,
            password: registerPassword
        }).then(function(res) {
                if (res.data === "User already exists") {
                    history.push("/register");
                } else if (res.data === "User created") {
                    history.push("/registerconfirmed");
                }
            });
    }

在服务器端，这是处理该发布请求的代码：

app.post("/register", (req, res) => {
    User.findOne({ username: req.body.username }, async (err, doc) => {
        if (err) throw err;
        if (doc) res.send("User already exists");
        if (!doc) {

            const hashedPassword = await bcrypt.hash(req.body.password, 10);

            const newUser = new User({
                username: req.body.username,
                password: hashedPassword
            });
            await newUser.save();
            res.send("User created");
        }

我已确认新用户已成功添加，而现有用户未成功添加。我在客户端得到的响应也可以记录来自服务器的正确响应。

问题是我设置的 IF 语句不起作用。无论注册新用户成功/失败，Register.jsx React 组件都会简单地刷新。如果不成功，我想重新加载 Register.jsx 组件，但是我想在新用户注册成功时呈现 RegisterConfirmed.jsx 组件。我怎样才能正确地做到这一点？

标签： reactjsexpresspromisereact-routeraxios

解决方案

方法一：

    function submitUser() {
            Axios.post("http://localhost:4000/register", {
                username: registerUsername,
                password: registerPassword
            }).then(function(res) {
                    if (res.data === "User already exists") {
                        return <Register />
                    } else if (res.data === "User created") {
                        return <Registerconfirmed />
                    }
            });
    }

方法2： 你可以用useState来做

    import { useState } from 'react';
    function submitUser() {
            const [status, setStatus] = useState(NULL);
            Axios.post("http://localhost:4000/register", {
                username: registerUsername,
                password: registerPassword
            }).then(function(res) { setPage(res.data) });
    return ( 
          {
           status === "User already exists" ? 
              <Register /> : status === "User created" ? 
              <Registerconfirmed /> : NULL
          }
    )
    }

推荐阅读