Oi Vitor, tudo bem?

Pelo que entendi, você está armazenando os dados do usuário no sessionStorage e, em seguida, tentando exibir esses dados em um componente. No entanto, os dados só são exibidos corretamente após atualizar a página.

Isso pode acontecer porque o React é uma biblioteca de renderização virtual, o que significa que ele atualiza apenas as partes da página que foram alteradas. Quando você atualiza o sessionStorage, o React não percebe automaticamente essa alteração e não atualiza o componente para refletir os novos dados.

Uma solução para esse problema é usar o estado do React para armazenar os dados do usuário. Dessa forma, quando os dados forem atualizados no sessionStorage, você pode atualizar o estado e o componente será renderizado novamente com os novos dados.

Aqui está um exemplo de como você pode fazer isso:

import React, { useState, useEffect } from "react";

function MeuComponente() {
  const [nome, setNome] = useState("");
  const [foto, setFoto] = useState("");

  useEffect(() => {
    const nomeUsuario = sessionStorage.getItem("Nome");
    const fotoUsuario = sessionStorage.getItem("Foto");

    setNome(nomeUsuario);
    setFoto(fotoUsuario);
  }, []);

  return (
    <div>
      <h1>{nome}</h1>
      <img src={foto} alt="Foto do usuário" />
    </div>
  );
}

Neste exemplo, estamos usando os hooks useState e useEffect do React. O useEffect é executado apenas uma vez, quando o componente é montado, e ele busca os dados do sessionStorage e os armazena no estado usando os setters setNome e setFoto.

Dessa forma, sempre que os dados forem atualizados no sessionStorage, o estado será atualizado e o componente será renderizado novamente com os novos dados.

Lembrando que essa é apenas uma ideia de como você pode fazer.

Um abraço e bons estudos.

Oi, Lorema. Bom dia

Infelizmente o efeito foi o mesmo, ou seja, ainda preciso dar F5 na pagina para carregar as informações da sessionStorage. Pelo que li na documentação, talvez a solução mais correta seria usar o UserContext, porem tenho pouco experiência para afirmar. Caso há uma solução desta maneira gostaria de saber afim de experiência. Vou deixar meu código abaixo para sua analise, pois pode ser que eu esteja fazendo algo errado.

1° Componente Busca dados

import { Container, Image } from "react-bootstrap"; import "./styles.css"; import { useEffect, useState } from "react";

const UsuarioLogado = () => {

const [nome, setNome] = useState(""); const [foto, setFoto] = useState("");

useEffect(()=>{ const nomeUsuario = sessionStorage.getItem("Nome"); const base64Imgem = sessionStorage.getItem("Foto"); const fotoUsuario = "data:image/png;base64," + base64Imgem;

setNome(nomeUsuario);
setFoto(fotoUsuario);

},[]);

return (

export default UsuarioLogado;

2° Login

import React, { useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import { Container, Row, Col, Form, Button, Alert } from "react-bootstrap"; import LogoLogin from "../../imgs/Login.webp"; import Config from "../../api/Config";

import "./style.css"; const Login = () => { const navigate = useNavigate(); const [mensagem, setMensagem] = useState(null);

const [dados, setDados] = useState({ UserName: "", password: "", });

const handleChange = (event) => { const { name, value } = event.target; setDados({ ...dados, [name]: value, }); }; const handleSubmit = async (event) => { event.preventDefault(); try { await Config.post("Auth/Login", dados).then((response) => { sessionStorage.setItem("token", response.data.token); sessionStorage.setItem("Nome", response.data.nome); sessionStorage.setItem("Foto", response.data.foto); sessionStorage.setItem("CodSistema", response.data.codSistemas);

    switch (response.data.codSistemas) {
      case 1:
        navigate("/Academia");
        
        break;
      case 2:
        navigate("/Barbearia");
      
        break;
      case 3:
        navigate("/Medicina");
        break;
        default:
          navigate("/Login");
    }
  });
} catch (error) {
  setMensagem({
    tipo: "danger",
    texto: JSON.stringify(error.response.data),
  });
}

}; return ( <>

Login

3: °
                            
                            import "./App.css";

import "bootstrap/dist/css/bootstrap.min.css"; import Routers from "./routers/Routers"; import NavigatorTop from "./components/Navegations/NavigatorTop"; import UsuarioLogado from "./components/UsurioLogado/UsuarioLogado"; function App() { return (

</div>

Oi Vitor

Parece que o código que você compartilhou parece estar estruturado corretamente, mas você está enfrentando o problema de que os dados do sessionStorage não são exibidos imediatamente após o login. Vou analisar seu código e dar algumas sugestões para solucionar o problema.

1. Verificação dos Dados do Session Storage: Certifique-se de que os dados no sessionStorage são realmente definidos corretamente após o login. Você pode adicionar algumas declarações console.log para verificar se os dados estão sendo armazenados corretamente. Isso pode ajudá-lo a identificar se o problema está no momento de definir os dados ou em outra parte do código.

2. Componente de Exibição de Dados: Se o problema estiver no componente que exibe os dados do usuário, como o componente UsuarioLogado, certifique-se de que ele está sendo renderizado corretamente. Você pode adicionar alguns console.log para verificar se os valores de nome e foto estão sendo definidos corretamente no estado do componente.

3. Utilização de useEffect: No seu componente UsuarioLogado, você já está usando useEffect para buscar os dados do sessionStorage e atualizar o estado. Certifique-se de que o useEffect está sendo chamado quando o componente é montado (apenas uma vez) e que ele está atualizando o estado corretamente. Se necessário, você pode adicionar mais console.log dentro do useEffect para depurar.

4. Renderização do Componente App: No componente App, você está renderizando UsuarioLogado após NavigatorTop e antes de Routers. Verifique se a ordem de renderização não está causando algum conflito com a exibição dos dados.

5. Contexto do Usuário: Você mencionou que considerou usar o UserContext, o que é uma boa ideia para lidar com informações de usuário globalmente na sua aplicação. Se os problemas persistirem, você pode implementar um contexto de usuário para armazenar e gerenciar esses dados. Isso garantiria que os componentes sejam atualizados sempre que os dados do usuário mudarem.

Se mesmo após essas verificações você continuar enfrentando problemas, pode ser útil adicionar mais informações de depuração, como console.log, para identificar exatamente onde o problema está ocorrendo. Isso ajudará a isolar a questão e encontrar a solução adequada.