Блог

Главная - Вопросы по программированию - react-ошибка навигационной панели начальной загрузки в Nextjs

react-ошибка навигационной панели начальной загрузки в Nextjs

#css #reactjs #next.js #react-bootstrap

Вопрос:

Недавно я начал использовать react-bootstrap с nextjs, и когда я использую компонент navBar, он выходит из строя, я не знаю почему. Когда моя навигационная панель загружается впервые, это нормально,

введите описание изображения здесь

но, когда я обновляю страницу, ошибки CSS

введите описание изображения здесь

и эта ошибка появляется в консоли.

введите описание изображения здесь

Вот мой код:

 <Navbar collapseOnSelect expand="lg" bg="danger" variant="dark">
  <Container>
    <Link href="/" passHref>
      <Navbar.Brand>Tecnologia Única</Navbar.Brand>
    </Link>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      {auth.isLoggedIn amp;amp; (
        <>
          <Nav className="me-auto">
            <NavDropdown title="Usuários" id="collasible-nav-dropdown">
              <Link href="/users/" passHref>
                <NavDropdown.Item>Listagem</NavDropdown.Item>
              </Link>
              <Link href="/users/create" passHref>
                <NavDropdown.Item>Novo</NavDropdown.Item>
              </Link>
            </NavDropdown>
          </Nav>
          <Nav className={styles.center}>
            <Navbar.Text>Bem-vindo, {auth.user.name}</Navbar.Text>
            <Nav.Link onClick={logoutHandler}>
              <Button variant="outline-light">Sair</Button>
            </Nav.Link>
          </Nav>
        </>
      )}

      {!auth.isLoggedIn amp;amp; (
        <Nav>
          <Link href="/login" passHref>
            <Nav.Link>
              <Button variant="outline-light">Entrar</Button>
            </Nav.Link>
          </Link>
        </Nav>
      )}
    </Navbar.Collapse>
  </Container>
</Navbar>

Кто — нибудь знает, почему это происходит?

Изменить: auth.isLoggedIn Код:

 import { createContext, useState, ReactNode } from "react";
import { useRouter } from "next/router";

interface IAuthContext {
  isLoggedIn: boolean;
  token: string | null;
  user: IUserData;
  onLogout: () => void;
  onLogin: (data: LoginData) => void;
}

interface IUserData {
  name: string;
  email: string;
  document: string;
  perfil: number;
}

const AuthContext = createContext<IAuthContext>({
  isLoggedIn: false,
  token: "",
  user: { document: "", email: "", name: "", perfil: 0 },
  onLogout: () => {},
  onLogin: (data: LoginData) => {},
});

type AuthContextProviderProps = {
  children: ReactNode;
};

type LoginData = {
  Id: number | null;
  IsUsuarioAtivo: boolean;
  TipoPerfil: number;
  Token: string;
  Nome: string;
  CPF: string;
  Email: string;
  Login: string | null;
  Perfis: string | null;
  UserIdFB: string | null;
  AccessTokenFB: string | null;
};

export const AuthContextProvider = (props: AuthContextProviderProps) => {
  const router = useRouter();

  let initialToken: string | null = "";
  if (typeof window !== "undefined") {
    initialToken = localStorage.getItem("token");
  }

  const [token, setToken]: any = useState(initialToken);
  const isUserLoggedIn = !!token;

  const [user, setUser]: any = useState<IUserData>({
    document: "",
    email: "",
    name: "",
    perfil: 0,
  });

  const logoutHandler = () => {
    setToken(null);
    localStorage.removeItem("token");
    router.push("/login");
  };

  const loginHandler = (data: LoginData) => {
    console.log(data);
    setToken(data.Token);
    localStorage.setItem("token", data.Token);
    setUser({
      name: data.Nome,
      email: data.Email,
      document: data.CPF,
      perfil: data.TipoPerfil,
    });
    router.push("/");
  };

  return (
    <AuthContext.Provider
      value={{
        user: user,
        token: token,
        isLoggedIn: isUserLoggedIn,
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Комментарии:

1. Можете ли вы показать ту часть кода, откуда auth.isLoggedIn она взялась?

2. Я отредактировал сообщение 🙂

3. Несоответствие происходит из initialToken -за того, что значение отличается при AuthContextProvider выполнении на сервере (установлено значение пустая строка) и при регидратации на клиенте (установлено значение localStorage.getItem("token") ). Попробуйте вместо этого переместить код, который должен выполняться только на клиенте ( localStorage доступ) внутри a useEffect .

4. Это сработало! Спасибо

Ответ №1:

как сказал Джулиомальвес, размещение логики Initialtoken внутри useEffect() крючка сработало. Obs: Я удалил начальную переменную токена, установив токен непосредственно со значением localstorage (начальное состояние переменной токена теперь»»).

 useEffect(() => {
   setToken(localStorage.getItem("token"));
}, []);

Метки: