Следующая JS useEffect locaStorage проблема - PullRequest
Новая
       4

Следующая JS useEffect locaStorage проблема

0 голосов
/ 28 апреля 2020

Я пытаюсь получить строку из localstorage и проверить это с некоторым условием и перенаправить страницу на основе значения из localstorage

, но проблема в том, что я мог видеть страницу в течение пары секунд даже раньше, чем она перенаправляет на исходную страницу

в основном ее аутентификационные вещи

вот код 

import React from "react";
import AdminDashboard from "../components/AdminDashboard";
import Router from "next/router";
import SignIn from "../pages/index";
import useRouter from "next/router";
import fetch from "isomorphic-unfetch";

var userType;
export default function Test({ token }) {
  const [userType, setuserType] = React.useState(false);

  React.useLayoutEffect(() => {
    if (userType !== true) {
      const lt = localStorage.getItem("userType");
      if (lt !== true) Router.push("/");
    }
    return () => {};
  }, []);
  {
    console.log(token);
  }
  return (
    <div>
      <AdminDashboard>Admin Page </AdminDashboard>
    </div>
  );
}

1 Ответ

0 голосов
/ 29 апреля 2020

Вы можете отобразить страницу в клиенте только во избежание мигания страницы.

С другой стороны, вы можете просто использовать useEffect. 

const Page = null;

React.useEffect(() => {
    if (userType !== true) {
      const lt = localStorage.getItem("userType");
      if (lt !== true) Router.push("/");
    } else {
      Page = (
        <div>
          <AdminDashboard>Admin Page </AdminDashboard>
        </div>
      )
    }
}, [])

return Page
...