GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

React useEffect não é acionado no redirecionamento

Eu tenho uma função chamada login que redireciona o usuário para a página principal se tudo estiver ok. Em seguida, na página principal, quero buscar algumas informações do usuário com useEffect usando o token que foi armazenado quando o usuário fez login, mas nada acontece. Somente quando eu atualizo a página, recebo os dados.

login function

export const login = ({ email, password, history }) => {
  return async (dispatch) => {
    try {
      const response = await fetch("http://localhost:5000/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });

      const data = await response.json();

      if (data.status === 200) {
        localStorage.setItem("userToken", data.user);
        history.push("/");
      } else {
        dispatch(
          setNotification({
            variant: "error",
            message: data.message,
          })
        );
      }
    } catch (e) {
      console.log(e.message);
    }
  };
};

fetch user funtion

export const fetchUser = () => {
  return async (dispatch) => {
    try {
      const response = await fetch("http://localhost:5000/userInfo", {
        headers: {
          "x-access-token": localStorage.getItem("userToken"),
        },
      });

      const data = await response.json();
      dispatch(setUser({
        id: data.id,
        fullname: data.fullname,
        email: data.email
      }))
    } catch (error) {}
  };
};

useEffect


export default function App() {
  const isAuth = isLoggedIn();
  const dispatch = useDispatch();
  const cart = useSelector((state) => state.cart);

  useEffect(() => {
    dispatch(fetchUser());
  }, []);

  useEffect(() => {
    if (!isAuth) {
      return;
    }
    if (isInitial) {
      isInitial = false;
      return;
    }
    if (cart.changed) {
      dispatch(sendCartData(cart));
    }
  }, [cart]);

  return (
    <React.Fragment>
      <Switch>
        <Route path="/" exact>
          <Home />
        </Route>
        <Route path="/componentes" exact>
          <Components />
        </Route>
        <Route path="/login" exact>
          <Login />
        </Route>
        <Route path="/cadastro" exact>
          <Register />
        </Route>
        <Route path="/produto/:nomeProduto" exact>
          <SingleProduct />
        </Route>
        <Route path="/componente/suspensao" exact>
          <Suspension />
        </Route>
        <Route path="/componente/quadro" exact>
          <Frame />
        </Route>
        <Route path="/marca/:brand" exact>
          <Brands />
        </Route>
        <Route path="/carrinho" exact>
          <Cart />
        </Route>
        <Route path="/equipamentos" exact>
          <Equipments />
        </Route>
        <Route path="/acessorios" exact>
          <Accessories />
        </Route>
        <Route path="/casual" exact>
          <Casual />
        </Route>
      </Switch>
    </React.Fragment>
  );
}

código do backend

module.exports.getCurrentUser = async (req, res) => {
  const token = req.headers["x-access-token"];
  try {
    const verifyToken = jwt.verify(token, "123");
    const user = await User.findOne({ email: verifyToken.email });
    return res.json({
      id: user._id,
      fullname: user.fullname,
      email: user.email
    })
  
  } catch (error) {}
};

Onde que esse useEffect está declarado?

Está no app.js. Atualizei o post.

Então vc quer que o efeito seja acionado logo após o usuário efetuar login? Se for, acho que não está correto a implementação, pois, ao usar [] como segundo argumento, o efeito será executado apenas uma vez. Penso que o correto seria vc fazer o efeito atuar em cima da mudança de algum estado.

Acho que algo +/- assim:

const usuarioLogado = useSelector((state) => state.usuarioLogado);

useEffect(() => {
  dispatch(fetchUser());
}, [usuarioLogado]);

Posso ter falado algum bobeira, pois ainda estou aprendendo também. =)

Funcionou, obrigado!

//