由于 useEffect，我的 React 应用程序主页刷新

Question

Here I am trying to get user Info from redux state to the homepage after signing in but the problem is that the component refreshes and lose all the redux data stored because of the useEffect hook, and I can't use the checkUser() method which retrieve user data without that hook because it cause an infinite rendering problem and ruin the app. So can you help me get the data from redux state without refreshing the component.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { checkUser } from '../../actions/userActions';
import { connect } from 'react-redux';
import './main.css';



function Main(props){


    const [loggedIn, setLoggedIn] = useState(false)

    useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[checkUser])

    useEffect(() => {
        console.log(loggedIn)
    }, [loggedIn])
    


    let menuOpened = false;

    const menuToggle = (element) => {
        element.preventDefault();
        let menuButton = document.querySelector('.menu-btn');
        let responsiveMenu = document.querySelector('.toggle-menu');

        if(!menuOpened){
            menuButton.classList.add('open');
            responsiveMenu?.classList.add('opened');

        }else if(menuOpened){
            menuButton.classList.remove('open');
            responsiveMenu?.classList.remove('opened');
        }
        menuOpened = !menuOpened ;
    }

    const search = (e) => {
        e.preventDefault();
    }


    return ( 
        <div>
            <h1 id='Title'>Your favorite<br></br>Gifts shop</h1>
        
            <nav id='navbar'>
                <div className='menu-btn' onClick={menuToggle}>
                    <div className='menu-btn-burger'></div>
                </div>
                <ul className='toggle-menu'>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/cart'>Cart</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/support'>Support</Link>
                    </li>
                </ul>
                <ul>
                    <li className='menu' id='menu1'><Link className='anchor-menu' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link></li>
                    <li className='menu' id='menu2'><Link className='anchor-menu' to='/cart'>Cart</Link></li>
                    <li className='menu' id='menu3'><Link className='anchor-menu' to='/support'>Support</Link></li>
                </ul>
                <form id='mainForm'>
                    <input id='mainInput'/>
                    <button id='search' onClick={search}>search</button>
                </form>
            </nav>
        </div>
    );

    
}


const mapUserStateToProps = (state) => {
    return{
        user : state?.myUser || [],
    }
}






export default connect(mapUserStateToProps, {checkUser})(Main);

Answer 1

Why do you have a function as a dependancy for the first useEffect. I think you should have props.user as the dependency instead if we want the state to change when the user object changes:

  useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[props?.user])

Answer 2

    useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[checkUser])

Replace above code with below code

    // this useEffect to get user data
    useEffect(() => {
        props.checkUser();
    },[]);

    // this useEffect to set isLoggedIn flag
    useEffect(() => {
        setLoggedIn(props?.user?.isLoggedIn)
    },[props?.user]);