即使已登录，React todo app 登录页面也会出现片刻

Question

我有一个 CRUD todo 应用程序，如果用户未登录，则在该应用程序中登录，并且存储在本地。 还通过 API 执行应用程序进行 CRUD 操作。 但即使用户已经登录，当页面刷新时，登录屏幕会出现并消失片刻。 我该如何解决这个问题？

  const [todoList, setTodoList] = useState([]);
  const [newTask, setNewTask] = useState("");
  const [todoEditing, setTodoEditing] = useState(null);
  const [editingText, setEditingText] = useState("");
  const [username, setUsername] = useState("");
  const [savedUsername, setSavedUsername] = useState("");
  const [theme, setTheme] = useState("light");
  const [addLoading, setAddLoading] = useState(false); // when adding a todo loading spinner appears in button
  const [todoLoading, setTodoLoading] = useState(null); //when crud operations happen a loading spinner appears in todo cards
  const [loading, setLoading] = useState(false); // loading state for crud functions 
  const [loginLoading, setLoginLoading] = useState(false); // loading screen for app rendering

useEffect(() => {
    setLoginLoading(true);
    const storageUsername = localStorage.getItem("username");
    if (storageUsername) {
      setSavedUsername(storageUsername);
    }

    setLoginLoading(false);
  }, []);

<ThemeContext.Provider value={{ theme }} style={{ position: "relative" }}>
      {savedUsername ? (
        <div className="container">
.... Components
</div>  ) : (
        <div className="login-container" id={theme}>
          {loginLoading ? (
            <Loading />
          ) : (
            <Login
              handleChange={setUsername}
              handleLogin={handleLogin}
              value={username}
            />
          )}
        </div>
      )}
    </ThemeContext.Provider>

Answer 1

您的useEffect效果仅在您第一次渲染后执行。 所以你的第一个 state 的loginLoading是false的，然后是true ，然后又是false的。 这应该解决它：

  const [todoList, setTodoList] = useState([]);
  const [newTask, setNewTask] = useState("");
  const [todoEditing, setTodoEditing] = useState(null);
  const [editingText, setEditingText] = useState("");
  const [username, setUsername] = useState("");
  const [savedUsername, setSavedUsername] = useState("");
  const [theme, setTheme] = useState("light");
  const [addLoading, setAddLoading] = useState(false); // when adding a todo loading spinner appears in button
  const [todoLoading, setTodoLoading] = useState(null); //when crud operations happen a loading spinner appears in todo cards
  const [loading, setLoading] = useState(false); // loading state for crud functions 
  const [loginLoading, setLoginLoading] = useState(true); // loading screen for app rendering

useEffect(() => {
    const storageUsername = localStorage.getItem("username");
    if (storageUsername) {
      setSavedUsername(storageUsername);
    }

    setLoginLoading(false);
  }, []);

<ThemeContext.Provider value={{ theme }} style={{ position: "relative" }}>
      {savedUsername ? (
        <div className="container">
.... Components
</div>  ) : (
        <div className="login-container" id={theme}>
          {loginLoading ? (
            <Loading />
          ) : (
            <Login
              handleChange={setUsername}
              handleLogin={handleLogin}
              value={username}
            />
          )}
        </div>
      )}
    </ThemeContext.Provider>

但是，为了进一步改进，我不会使用加载 state 进行登录，因为localStorage.getItem("username")是一个同步操作，可以像这样更优雅地执行：

  const [todoList, setTodoList] = useState([]);
  const [newTask, setNewTask] = useState("");
  const [todoEditing, setTodoEditing] = useState(null);
  const [editingText, setEditingText] = useState("");
  const [username, setUsername] = useState("");
  const [savedUsername, setSavedUsername] = useState(() => localStorage.getItem("username") || "");
  const [theme, setTheme] = useState("light");
  const [addLoading, setAddLoading] = useState(false); // when adding a todo loading spinner appears in button
  const [todoLoading, setTodoLoading] = useState(null); //when crud operations happen a loading spinner appears in todo cards
  const [loading, setLoading] = useState(false); // loading state for crud functions 

<ThemeContext.Provider value={{ theme }} style={{ position: "relative" }}>
      {savedUsername ? (
        <div className="container">
.... Components
</div>  ) : (
        <div className="login-container" id={theme}>
          <Login
            handleChange={setUsername}
            handleLogin={handleLogin}
            value={username}
          />
        </div>
      )}
    </ThemeContext.Provider>