如何从 apiCall 获取响应以显示在我的组件中？答案

【问题标题】：How do I fetch the response from an apiCall to display in my component?如何从 apiCall 获取响应以显示在我的组件中？
【发布时间】：2021-12-30 11:09:45
【问题描述】：

基本上我有我的 AuthContext，还有我的 reducer、actions 和 apicalls。

AuthReducer：

        case "LOGIN_FAILURE":
        return {
            user: null,
            isFetching: false,
            error: true,
        };

授权操作：

export const loginFailure = () => ({
type:"LOGIN_FAILURE",

});

ApiCalls：

export const login = async (user, dispatch) => {
dispatch(loginStart());
try {
    const res = await axios.post("/auth/login", user);
    dispatch(loginSuccess(res.data));
} catch (err) {
    dispatch(loginFailure());
}

};

以及我的 api 中的实际调用：

router.post("/login", async (req, res) => {
    try {
        const user = await User.findOne({ email: req.body.email });
        !user && res.status(401).json("Wrong password or username!");

        const bytes = CryptoJS.AES.decrypt(user.password, process.env.SECRET_KEY);
        const originalPassword = bytes.toString(CryptoJS.enc.Utf8);

        originalPassword !== req.body.password &&
        res.status(401).json("Wrong password or username!");

        const accessToken = jwt.sign(
            { id: user._id, isAdmin: user.isAdmin },
            process.env.SECRET_KEY,
            { expiresIn: "5d" }
        );

        const { password, ...info } = user._doc;

        res.status(200).json({ ...info, accessToken });
    } catch (err) {
        res.status(500).json();

    }
});

在我的组件中：

    const handleLogin = (e) => {
    if(email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g)){
        login({email, password}, dispatch);
        e.preventDefault();
        history.push("/");
    }
};

一切都很好。现在，当我输入错误的登录凭据时，显然没有任何反应。在 Network -> Response 下的 chrome 控制台中，我得到了“错误的用户名或密码”。但是如何获取 401 响应以将其显示在我的组件中，这样如果我输入了错误的登录凭据，我就可以在我的登录按钮上显示它。

【问题讨论】：

标签： javascript reactjs mongodb

【解决方案1】：

我认为您可以尝试将Toastify 实现到您的项目中，将其导入到Log In 组件中

import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

，每当你得到 401 条件时，正如我在你的代码中看到的那样：

const user = await User.findOne({ email: req.body.email });
!user && res.status(401).json("Wrong password or username!");

这里：

originalPassword !== req.body.password &&
res.status(401).json("Wrong password or username!");

只需在其中实现toast.error('Your desire error')，您不必重新编写代码或其他任何东西，我认为您可以开始了。

【讨论】：

我无法在我的 auth.js 中实现它...它说 import { toast } from "react-toastify"; ^^^^^^ SyntaxError: Cannot use import statement outside a module and if I implement it in my login component, I can't write toast.error('Your hope error') in the auth.js file,所以它发生错误用户名或密码。
你可以尝试去package.json添加{ "type": "module" }，它会确保所有的.js和.mjs文件都被解释为ES模块。
然后我的另一个 const router = require("express").Router(); const User = require("../models/User"); const CryptoJS = require("crypto-js");常量 jwt = 要求（“jsonwebtoken”）；虽然我认为事情不会奏效
哦，然后删除type: "module"，我的错。你没有像我平时那样使用 import-export，让我看看是否有办法用你的方式实现它。
@lorijames95 你能尝试创建一个新文件吗，比如toastifyNotfi.js 或类似的东西，只有import { toast } from 'react-toastify'？它会起作用吗？或者类似的东西。 const toast = require('toast') from 'react-toastify'