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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 04.02.2023

Не понимаю, почему я не могу передать значение в состояние. На первый взгляд все правильно. 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;

reactjs react-hook

Источник: Stack Overflow на русском

Answer 1

▲ 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 выберет, что отображать.

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

Ответы