0

Olá, estou com uma dificuldade para fazer uma pagina em react funcionar. Essa pagina ela recebe uma query string com token e email, onde eu devo pegar eles e fazer uma requisição para que a conta seja validada, no caso fazendo uma requisição e ao receber o retorno da promise e exibir a mensagem, que no caso um um modal.

useEffect(() => {
    dispath(setLoadingShow());
    const email = query.get('email') as string;
    const token = query.get('token') as string;
    const encondedToken = encodeURIComponent(token);
    if (!encondedToken && !email) {
      history.push('/');
    } else {
      fetchResetPassword(email, encondedToken)
        .then(() => {
          setErrorIcon(<RiCheckDoubleFill className={global.iconSuccess} />);
          setTitle('Sua senha foi alterada, favor verificar seu e-mail');
          onDialog();
        })
        .finally(() => dispath(setLoadingHide()));
    }
  }, [query, global, history, dispath]);

o meu ponto e que ao acessar o componente, ele começa a fazer milhares de requisições sem parar, não sei onde posso estar errado. Enquanto a pagina continuar ele vai fazer requisições sem parar.

2 Respostas 2

1

Olá! Creio que o seu problema seja manter o "Dispatch" no array de dependências. O UseEffect faz com que qualquer uma das variáveis armazenadas dentro daquele array seja "ouvida", e qualquer alteração nela, ele executa o useEffect novamente.

useEffect(() => {
    dispath(setLoadingShow());
    const email = query.get('email') as string;
    const token = query.get('token') as string;
    const encondedToken = encodeURIComponent(token);
    if (!encondedToken && !email) {
      history.push('/');
    } else {
      fetchResetPassword(email, encondedToken)
        .then(() => {
          setErrorIcon(<RiCheckDoubleFill className={global.iconSuccess} />);
          setTitle('Sua senha foi alterada, favor verificar seu e-mail');
          onDialog();
        })
        .finally(() => dispath(setLoadingHide()));
    }
  }, [query]);

Eu manteria apenas o query para evitar redundancias.

0

Tome cuidado com o eslint auto formatando seu código, nesses campos críticos indico você colocar quando necessário a tag de disabled do eslint:

useEffect(() => {
  dispath(setLoadingShow());
  const email = query.get('email') as string;
  const token = query.get('token') as string;
  const encondedToken = encodeURIComponent(token);
  if (!encondedToken && !email) {
    history.push('/');
  } else {
    fetchResetPassword(email, encondedToken)
    .then(() => {
      setErrorIcon(<RiCheckDoubleFill className={global.iconSuccess} />);
      setTitle('Sua senha foi alterada, favor verificar seu e-mail');
      onDialog();
    })
    .finally(() => dispath(setLoadingHide()));
  }
// eslint-disable-next-line
}, [query]);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .