首页 / 技术问答 / Reactjs问答列表 / 问答详情

Reactjs 在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

这是我得到的错误

action auth/requestStart @ 22:09:03.936
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.936
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.937
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.937
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.938
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.938
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.939
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.939
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}

// Function for creating new User with email and password
export const createAccountWithEmailAndPassword = async (email, password) => { 
    const auth = getAuth();
    dispatch(authActions.requestStart());

    try {
        await setPersistence(auth, browserLocalPersistence);

        const user = await createAccountWithEmailAndPassword(auth, email, password);

        const idToken = await auth.currentUser.getIdToken();
        
        dispatch(authActions.requestSuccess(user , idToken));
        console.log('email Signup Worked Perfectly ');
    } catch (err) {
        console.error(err);
        dispatch(authActions.requestFail(err.message));
        dispatch(authActions.resetAuth());
        console.log('Sign up Failed');
    }
};

这是我的AuthActions

import { createSlice } from "@reduxjs/toolkit";

const authSlice = createSlice({
    name: "auth",
    initialState: {
        user: null,
        isAuthenticated: false,
        idToken: null,
        loading: true,
        error: null,
    },
    reducers: {
        requestStart(state, action) {
            state.loading = true;
        },
        loadUser(state, action) {
            state.user = action.payload.user;
            state.idToken = action.payload.idToken;
            state.isAuthenticated = true;
            state.loading = false;
        },
        logOut(state, action) {
            state.user = null;
            state.isAuthenticated = false;
            state.idToken = null;
            state.loading = false;
            state.error = null;
        },
        resetAuth(state, action) {
            state.user = null;
            state.isAuthenticated = false;
            state.idToken = null;
            state.loading = false;
            state.error = null;
        },
        requestFail(state, action) {
            state.loading = false;
            state.error = action.payload;
        },
    },
});

export default authSlice.reducer;
export const authActions = authSlice.actions;

这是我的自动减速机

下面是我的注册页面代码

'use client'
import * as React from 'react';
import { useState } from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { ThemeProvider } from '@mui/material/styles';
import routes from '@/config/routes';
import Navbar from '@/Components/Navbar';
import defaultTheme from '@/config/muiTheme';
import { createAccountWithGooglePopUp, createAccountWithEmailAndPassword } from '@/store/actions/auth';

export default function Register() {

    const [fullName, setFullName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleRegisterWithEmailAndPassword = async () => {
        await createAccountWithEmailAndPassword( email, password);
    };


    // function to register with googlePopUp
    const handleRegisterWithGooglePopUp =  () => { 
        createAccountWithGooglePopUp();
    };

    return (
        <ThemeProvider theme={defaultTheme}>
            <Navbar />
            <Container component="main" maxWidth="xs">
                <CssBaseline />
                <Box
                    sx={{
                        marginTop: 20,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >
                    <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
                        <LockOutlinedIcon />
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Sign up
                    </Typography>
                    <Box component="form" noValidate sx={{ mt: 3 }}>
                        <Grid container sx={{ justifyContent: 'center' }}>
                            <TextField
                                autoComplete="name"
                                name="fullName"
                                required
                                fullWidth
                                id="fullName"
                                label="Full Name"
                                autoFocus
                                value={fullName}
                                onChange={(e) => setFullName(e.target.value)}
                                sx={{
                                    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                                        borderColor: 'white',
                                    },
                                    '& .MuiInputLabel-root.Mui-focused': {
                                        color: 'white',
                                    },
                                }}
                            />
                            <Grid item xs={12}>
                                <TextField
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    onChange={(e) => setEmail(e.target.value)}
                                    sx={{
                                        '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                                            borderColor: 'white',
                                        },
                                        '& .MuiInputLabel-root.Mui-focused': {
                                            color: 'white',
                                        },
                                        mt: 2,
                                    }}
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    required
                                    fullWidth
                                    name="password"
                                    label="Password"
                                    type="password"
                                    id="password"
                                    autoComplete="new-password"
                                    onChange={(e) => setPassword(e.target.value)}
                                    sx={{
                                        '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                                            borderColor: 'white',
                                        },
                                        '& .MuiInputLabel-root.Mui-focused': {
                                            color: 'white',
                                        },
                                        mt: 2,
                                        mb: 2,
                                    }}
                                />
                            </Grid>
                            <Grid item xs={12}>
                            </Grid>
                        </Grid>
                        <Button
                            type="button"
                            fullWidth
                            variant="contained"
                            sx={{ mt: 3, mb: 1, border: '1px solid grey' }}
              onClick={handleRegisterWithEmailAndPassword}
                        >
                            Sign Up
                        </Button>
                        <Button
                            type="button"
                            fullWidth
                            variant="contained"
                            sx={{ mt: 0, mb: 2, border: '1px solid grey' }}
                            onClick={handleRegisterWithGooglePopUp}
                        >
                            Create An Account With Google
                        </Button>
                        <Grid container justifyContent="flex-end">
                            <Grid item>
                                <Link href={routes.LOGIN_PAGE} sx={{ color: "white" }} variant="body2">
                                    Already have an account? Sign in
                                </Link>
                            </Grid>
                        </Grid>
                    </Box>
                </Box>
            </Container>
        </ThemeProvider>
    );
}

当我点击登录按钮时，我会在控制台中看到这些 在这些之后，我收到失败的请求或本地主机崩溃，这些只是几个请求，但可能有1000个相同的请求开始和失败，这是一个循环的请求启动，请帮助我，如果有人可以帮助我，我被这个问题困在2天内，无法解决它 我用的是Reaction和Firebase

action auth/requestStart @ 22:09:03.936
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.936
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.937
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.937
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.938
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.938
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.939
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}
VM20:6  action auth/requestStart @ 22:09:03.939
VM20:6  prev state {auth: {…}}
VM20:6  action     {type: 'auth/requestStart', payload: undefined}
VM20:6  next state {auth: {…}}

这是我得到的错误 please help me

推荐答案

Issue

您的createAccountWithEmailAndPassword函数递归地调用自身.

// Function for creating new User with email and password
export const createAccountWithEmailAndPassword = async (email, password) => { 
  const auth = getAuth();
  dispatch(authActions.requestStart());

  try {
    await setPersistence(auth, browserLocalPersistence);

    const user = await createAccountWithEmailAndPassword( // <-- recursive call!
      auth,
      email,
      password
    );

    const idToken = await auth.currentUser.getIdToken();
        
    dispatch(authActions.requestSuccess(user , idToken));
    console.log('email Signup Worked Perfectly ');
  } catch (err) {
    console.error(err);
    dispatch(authActions.requestFail(err.message));
    dispatch(authActions.resetAuth());
    console.log('Sign up Failed');
  }
};

Solution

我怀疑内部的createAccountWithEmailAndPassword是Firebase函数，所以你应该使用不同的标识符重命名它或101函数，这样就不会有名称冲突.

例如:

  • Rename the Firebase function:个

    import {
  getAuth,
  createUserWithEmailAndPassword as createUserWithEmailAndPasswordFirebase
} from "firebase/auth";

// Function for creating new User with email and password
export const createAccountWithEmailAndPassword = async (email, password) => { 
  const auth = getAuth();
  dispatch(authActions.requestStart());

  try {
    await setPersistence(auth, browserLocalPersistence);

    const user = await createUserWithEmailAndPasswordFirebase(auth, email, password);

    const idToken = await auth.currentUser.getIdToken();

    dispatch(authActions.requestSuccess(user , idToken));
    console.log('email Signup Worked Perfectly ');
  } catch (err) {
    console.error(err);
    dispatch(authActions.requestFail(err.message));
    dispatch(authActions.resetAuth());
    console.log('Sign up Failed');
  }
};

    import { createAccountWithEmailAndPassword } from '@/store/actions/auth';

...

const handleRegisterWithEmailAndPassword = () => {
  return createAccountWithEmailAndPassword(email, password);
};

  • Rename your function:个

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

// Function for creating new User with email and password
export const createAccountWithEmailAndPasswordApp = async (email, password) => { 
  const auth = getAuth();
  dispatch(authActions.requestStart());

  try {
    await setPersistence(auth, browserLocalPersistence);

    const user = await createUserWithEmailAndPassword(auth, email, password);

    const idToken = await auth.currentUser.getIdToken();

    dispatch(authActions.requestSuccess(user , idToken));
    console.log('email Signup Worked Perfectly ');
  } catch (err) {
    console.error(err);
    dispatch(authActions.requestFail(err.message));
    dispatch(authActions.resetAuth());
    console.log('Sign up Failed');
  }
};

    import { createAccountWithEmailAndPasswordApp } from '@/store/actions/auth';

...

const handleRegisterWithEmailAndPassword = () => {
  return createAccountWithEmailAndPasswordApp(email, password);
};

Reactjs相关问答推荐

从Microsoft Excel粘贴复制的单元格时，将Excel单元格格式(粗体、下划线、斜体)带入Reaction

单击空白区域时，Reaction Multiple下拉组件不关闭

获取更改后的状态值

在 React 中是否有任何理由要记住 Redux 操作创建者？

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

如何隐藏移动导航栏后面的向下滚动图标和文本？

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理？

React对象值下降2次而不是1次

Zod 验证模式根据另一个数组字段使字段成为必需字段

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

下一个js如何从另一个组件更新组件？

从一个获取 axios 请求(ReactJS)中删除默认参数

谁能根据经验提供有关 useEffect 挂钩的更多信息

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

如何使用 babel 将 SVG 转换为 React 组件？

将 dict 值转换并插入到react 钩子的列表中

CORS 政策：无访问控制允许来源-AWS 和 Vercel

react / firebase 基地.如何在我的项目中保存更新的数据？

我可以在类组件中使用 useState 挂钩吗？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630