Блог

Я пытаюсь реализовать простую опцию «запомнить меня» для системы входа в приложение React. Согласно консоли, кажется, что все должно работать правильно. Однако отображаемые выходные данные продолжают отображать экран входа в систему. Вот мой код:

 import React, { useState } from 'react';
import Login from '../Login/Login';
import GroupList from '../GroupList/GroupList';

// Flag to avoid infinite loop
let checkedLogin = false;
function App(props) {

  // State hooks
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [userID, setUserID] = useState(null);

  // Load from session storage
  if("userID" in localStorage amp;amp; !checkedLogin) {
    let newUserID = parseInt(localStorage.getItem("userID"));
    checkedLogin = true;
    loginComplete(newUserID);
  }

  // Callback function for login to update main app
  function loginComplete(newUserID) {

    // Set state variables
    setLoggedIn(true);
    setUserID(newUserID);

    // Save to localStorage
    localStorage.setItem('userID', JSON.stringify(newUserID));
  }


  console.log(userID);
  console.log(isLoggedIn);

  // JSX return
  if(isLoggedIn) {
    return <GroupList 
      API_ROUTE={props.API_ROUTE} 
      userID={userID}
      />

  }else{
    return <Login 
      API_ROUTE={props.API_ROUTE} 
      loginCallback={loginComplete}
      />
  }
}

export default App;
 

И вот что возвращает консоль:

Если у кого-нибудь есть какие-либо советы, я буду вам очень признателен. Спасибо.

Попробуйте завернуть внутрь useEffect . и нет необходимости создавать другую переменную checkedLogin, которую вы можете использовать isLoggedIn только.

   useEffect(() => {
    // Load from session storage
    if ("userID" in localStorage amp;amp; !checkedLogin) {
      let newUserID = parseInt(localStorage.getItem("userID"));
      checkedLogin = true;
      loginComplete(newUserID);
    }
  }, [newUserID]);