reactjs React:在状态中检测到不可序列化的值

a7qyws3x  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(186)

我尝试使用firebase auth rest API在我的应用程序中创建一个简单的登录/注销功能,我使用redux让用户登录和注销,用户在firebase中完全注册,但当我点击表单的Signup & Login按钮时,我得到了此错误👇

对于redux工具包,我想知道我的login函数的initialState出了什么问题。-

//login-store.js
const { configureStore, createSlice } = require("@reduxjs/toolkit");

const userAuth = createSlice({
    name: "login",
    initialState: {
        token: "",
        isLoggedIn: false,
        login: (token) => {},
        logout: () => {},
    },
    reducers: {
        logginOut(state) {
            state.isLoggedIn = false;
            state.logout = () => {
                localStorage.removeItem("userLoginToken");
            };
        },
        loggingIn(state) {
            state.isLoggedIn = true;
            state.token = localStorage.getItem("userLoginToken");
            state.login = (token) => {
                return localStorage.setItem("userLoginToken", token);
            };
        },
    },
});

const authStore = configureStore({
    reducer: userAuth.reducer,
});

export const userAuthAction = userAuth.actions;

export default authStore;

这里我有我的登录和注册功能。还有一个问题,每当我点击提交按钮下面的New User按钮,我立即得到警报弹出(写有下面的评论)我不知道我是如何发送获取请求,而切换表单...

//Login.js

import React, { useRef, useState } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { userAuthAction } from "../store/login-store";
import classes from "./pages.module.css";

export default function Login() {
    const dispatch = useDispatch();
    const [isLogin, setIsLogin] = useState(true);
    const navigate = useNavigate();

    const emailInput = useRef();
    const passwordInput = useRef();

    const switchAuthTextHandler = () => {
        setIsLogin((prevState) => !prevState);
    };

    const loginAuthHandler = (e) => {
        e.preventDefault();
        const enteredEmailValue = emailInput.current.value;
        const enteredPasswordValue = passwordInput.current.value;

        let authUrl;

        if (isLogin) {
            // when logging in
            authUrl =
                "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyB3Mbv38Ju8c9QedQzqX3QvufTCOXhkU0c";
        } else {
            // when signing up
            authUrl =
                "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyB3Mbv38Ju8c9QedQzqX3QvufTCOXhkU0c";
        }

        fetch(authUrl, {
            method: "POST",
            body: JSON.stringify({
                email: enteredEmailValue,
                password: enteredPasswordValue,
                returnSecureToken: true,
            }),
            headers: {
                "Content-type": "application/json",
            },
        })
            .then((res) => {
                if (res.ok) {
                    return res.json();
                } else {
                    return res.json().then((data) => {
                        // getting alert popup immediately after switching the form
                        alert(data.error.message);
                    });
                }
            })
            .then((data) => {
                dispatch(userAuthAction.loggingIn(data.idToken));
                navigate("/");
                console.log(data);
            })
            .catch((err) => {
                console.error(err.message);
            });
    };

    return (
        <div className={classes.loginWrapper}>
            <form onSubmit={loginAuthHandler}>
                <h4>{isLogin ? "Login" : "Signup"}</h4>
                <div className={classes.form_group}>
                    <label htmlFor="email">Email</label>
                    <input type="email" id="email" ref={emailInput} />
                </div>
                <div className={classes.form_group}>
                    <label htmlFor="password">Password</label>
                    <input type="password" id="password" ref={passwordInput} />
                </div>
                <div className={classes.form_group}>
                    <button type="submit">{isLogin ? "Login" : "Signup"}</button>
                </div>
                <div className={classes.form_group}>
                    <button className={classes.newUser} onClick={switchAuthTextHandler}>
                        {isLogin ? "New User?" : "Already have account"}
                    </button>
                </div>
            </form>
        </div>
    );
}

注册新用户时出错:-

e4yzc0pl

e4yzc0pl1#

不应将函数引用存储在redux存储区中。它们是不可序列化的,并且在redux状态下状态应为serializable

相关问题