Не передать значение в состояние, React

Question

Не понимаю, почему я не могу передать значение в состояние. На первый взгляд все правильно. loginStatus2, равняться значению по умолчанию, хотя он должен быть равен true/false в зависимости от того что храниться в loggedInUser.

import { React,useEffect,useState } from 'react';
import Footer from '../components/Footer'
import Header from '../components/Header'
import { Navigate } from "react-router-dom";



const Dashboard = () => {
    let [loginStatus2, setLoginStatus2] = useState(null);
    useEffect(()=>{
      const loggedInUser = localStorage.getItem("loginStatus");
        if (loggedInUser) {
        setLoginStatus2(loggedInUser);
        console.log(loginStatus2)
        console.log(loggedInUser)
            }
      },[])
    if (!loginStatus2){
      return <Navigate replace to="/login" />;
    }else{
      return(
      <>
       <Header/>
        <Footer />
        <div>
            <p>Welcome to your Dashboard</p>
        </div>
      </>
      )
    }
}
export default Dashboard;

Answer 1

Причина в том, что компонент сначала монтируется, а уже после этого вызывается useEffect. На момент первого рендера, состояние false(null), что вызывало переадресацию пользователя, как следовательно, мы получили нежелательное поведение.

Избавить от этого можно, добавив флаг(Например isReady) проверки пользователя:

const Dashboard = () => {
  const [loginStatus2, setLoginStatus2] = useState(null);
  const [isReady, setReady] = useState(false);

  useEffect(()=>{
    const loggedInUser = localStorage.getItem("loginStatus");
    if (loggedInUser) {
      setLoginStatus2(loggedInUser);
      console.log(loginStatus2);
      console.log(loggedInUser);
    }
    setReady(true); // Проверка выполнена
    }, []);

  if (isReady)
    if (!loginStatus2){
      return <Navigate replace to="/login" />;
    } else {
      return(
      <>
      <Header/>
        <Footer />
        <div>
            <p>Welcome to your Dashboard</p>
        </div>
      </>
      )
    }
    else {
      return <div>Loading...</div>
    }
}

Таким образом, до тех пор, пока не выполнится проверка пользователя(не сработает useEffect), компонент будет отображать Loading, после проверки, уже про состоянию loginStatus2 выберет, что отображать.

БЛОГ НА HUSL

Не передать значение в состояние, React

Ответы (1 шт):