为什么 state 在 React JS 中再次自动更新？

Question

我添加了一个Google 按钮以使用 Google 帐户登录。 我有一个名为loggedIn的 state 属性，其值最初为false 。 当我使用Google 按钮登录时，我还发送了登录减速器，并且 state 正在更新并导航到主页，但 state 立即再次更新为 false 并返回登录页面。

我遇到的问题在视频中：问题 | 剪辑冠军

redux.js

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

const slice = createSlice({
  name: 'chat-app',
  initialState: {
    profile: null,
    loggedIn: false,
  },
  reducers: {
    login: state => {
      state.loggedIn = true;
    },
    logout: state => {
      state.loggedIn = false;
    },
  },
});

export const { login, logout } = slice.actions;
export default slice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import chatReducer from './slice';

const store = configureStore({
  reducer: {
    item: chatReducer,
  },
});

export default store;

在App.jsx中，我添加了路由。 在这里，它正在检查loggedIn值并设置路由。 一探究竟。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-icons/font/bootstrap-icons.css';
import Home from './pages/Home';
import Authentication from './pages/Authentication';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

const App = () => {
  const { loggedIn } = useSelector(state => state.item);
  console.log("App", loggedIn);
  let routes;

  if (loggedIn) {
    routes = (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/home" element={<Home />} />
        <Route path="/logout" element={<Authentication />} />
        <Route
          path="*"
          element={<Navigate to="/" replace />} //this is a way to redirect
        />
      </Routes>
    );
  } else {
    routes = (
      <Routes>
        <Route path="/auth" element={<Authentication />} />
        <Route
          path="*"
          element={<Navigate to="/auth" replace />} //this is a way to redirect
        />
      </Routes>
    );
  }

  return <>{routes}</>;
};

export default App;

Authentication.jsx ，在signInWithGoogle function 我已经调度和导航。

import React, { useState } from 'react';
import SignIn from '../components/SignIn';
import SignUp from '../components/SignUp';
import { auth } from '../firebase/firebase';
import { signInWithRedirect, GoogleAuthProvider } from 'firebase/auth';
import GoogleButton from 'react-google-button';
import { useNavigate } from 'react-router-dom';
import { login } from '../redux/slice';
import { useDispatch } from 'react-redux';

const Authentication = () => {
  const [page, setPage] = useState(true);
  const [data, setData] = useState({ email: '', password: '' });
  const [signUpData, setSignUpdData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: '',
    phoneNumber: '',
    dateOfBirth: '',
  });

  const pageHandler = () => {
    setPage(!page);
  };

  const dataHandler = event => {
    event.preventDefault();
    setData({ ...data, [event.target.name]: event.target.value });
  };

  const signUpDataHandler = event => {
    event.preventDefault();
    setSignUpdData({ ...signUpData, [event.target.name]: event.target.value });
  };

  const navigate = useNavigate();
  const dispatch = useDispatch();

  // Google Button sign in
  const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
    dispatch(login());
    navigate('/', { replace: true });
  };

  return (
    <div className="container mt-5">
      <div className="card mx-auto w-75 bg-success p-4">
        <div className="card-body ">
          {page ? (
            <SignIn data={data} dataHandler={dataHandler} />
          ) : (
            <SignUp
              signUpData={signUpData}
              signUpDataHandler={signUpDataHandler}
            />
          )}
        </div>
      </div>
      <div className="d-flex w-75 mx-auto my-3 align-items-center">
        <hr className="w-100 m-0 p-0" />
        <p className="m-0 mx-3">or</p>
        <hr className="w-100 m-0 p-0" />
      </div>
      <div className="d-flex justify-content-center">
        <div>
          <GoogleButton onClick={signInWithGoogle} />
        </div>
      </div>
      <button
        className="btn btn-outline-success mx-auto d-block my-3"
        onClick={pageHandler}>
        {page ? 'Sign Up' : 'Sign In'}
      </button>
    </div>
  );
};

export default Authentication;

主页.jsx

import React from 'react';
import ChatBox from '../components/ChatBox';
import Navbar from '../components/Navbar';
import './home.scss';
import { auth } from '../firebase/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';

const Home = () => {
  const [user] = useAuthState(auth);
  console.log('Home', user);
  return (
    <div className="home-main bg-light">
      <Navbar user={user} />
      <ChatBox />
    </div>
  );
};

export default Home;

导航栏.jsx

import React from 'react';
import './navbar.scss';
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { logout } from '../redux/slice';
import { auth } from '../firebase/firebase';

const Navbar = ({ user }) => {
  console.log('nav', user);

  const dispatch = useDispatch();

  const signOut = () => {
    signOut(auth);
    dispatch(logout());
  };

  return (
    <div className="bg-success navigation">
      <div className="chats d-flex flex-column align-items-center">
        <Link to="/">
          <i className="bi bi-house text-light" style={{ fontSize: '30px' }} />
        </Link>
        <Link to="/logout">
          <i
            className="bi bi-sign-turn-left text-light"
            onClick={() => auth.signOut()}
            style={{ fontSize: '30px' }}
          />
        </Link>
      </div>
      <div className="profile">
        <Link to="/" className="profile-link">
          <img
            className="profile-picture"
            src="https://res.cloudinary.com/djz3p8sux/image/upload/v1660556173/image/IMG_20220703_174147_w8fbhq.jpg"
            alt="profile-picture"
          />
        </Link>
      </div>
    </div>
  );
};

export default Navbar;

我的问题是为什么在将state值更新为 true 后，它又自动更新为 false？ 如何解决？ 登录后我想 go 到主页。

Answer 1

尝试在 Navbar.jsx 中修复 signOut function：我看到您在进行递归（本身调用 function）。 可能您想要做的是从另一个文件（我认为）导入另一个 signOut function。 尝试修复此问题（您可以更改 function 的名称，这样您将拥有两个不同的名称）。