React.js localStorage 没有导致正确的重新渲染

Question

我正在尝试为 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 && !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;

这是控制台返回的内容：

如果有人有任何建议，非常感谢。谢谢。

Answer 1

尝试包裹在 useEffect 中。并且无需创建另一个变量 checkedLogin，您只能使用 isLoggedIn。

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