-1

Tenho um formulário que recebe parâmetros com os quais realizo um get no servidor, trazendo e renderizando as informações ao usuário.

Atualmente esse get é feito chamando uma função no onClick de um botão (conforme no código abaixo, chama a function buscaAtendimentos através do onClick={buscaAtendimentos} ). Como já tenho os parâmetros iniciais para busca, gostaria que assim que o formulário fosse "carregado" já disparasse o evento e apresentasse as informações em tela, uma espécie de evento "onShow()", porém não existe nada semelhante, tal como temos o onClick().

Como poderia fazer isso com react? Toda ajuda é bemvinda!

A seguir código de exemplo:

import React, { FormEvent, useState }  from 'react';
import { useLocation } from "react-router-dom";    
import api from '../../services/api';    
import AtendimentoItem, { Atendimento } from '../../componentes/AtendimentoItem';
...    
const ListaAtendimentos: React.FC = () => {
  const { state }  = useLocation<Organizacao>();
  const [atendimentos, setAtendimentos] = useState([]); 

  async function buscaAtendimentos(e: FormEvent) {
    const response = await api.get('atendimentos' , {
      params: {
        organizacao_atd: state.id_org
      }
    });
    setAtendimentos(response.data);
  }

  return (
    <div>      
      <form id="busca-atendimentos" >
        <button type="button" onClick={buscaAtendimentos}>Pesquisar</button>       
        <main>        
          {atendimentos.map((atendimento: Atendimento) => {
            return <AtendimentoItem key={atendimento.id_atd} atendimento={atendimento}  />;
          })}
        </main>
      </form>
    </div>
  );
}

export default ListaAtendimentos;
2
  • useEffect é disparado assim que a tela renderiza, podes fazer nesse momento.. 22/06/2021 às 0:58
  • Perfeito, era exatamente o que eu precisava. Em meus primeiros passos com react! Obrigado pela dica!
    – Marcs
    22/06/2021 às 22:53

1 Resposta 1

0

Deixar registrado a solução para outros que como eu estão nos primeiros passos com react. Bastante simples a solução apresentada por Jonathan CR e Rafael Tavares, através do useEffect(). A eles meu obrigado!

Simplesmente adicionei o useEffect() fazendo chamada à função buscaAtendimentos(), com o cuidado de passar o array vazio [], para realizar a chamada apenas uma vez e que não ficar repetindo infinitamente. O código simplificado ficou assim:

import React, { FormEvent, useEffect, useState }  from 'react';
import { useLocation } from "react-router-dom";    
import api from '../../services/api';
import AtendimentoItem, { Atendimento } from '../../componentes/AtendimentoItem';    
...    
const [atendimentos, setAtendimentos] = useState([]); 
async function buscaAtendimentos() {
    const response = await api.get('atendimentos' , {
      params: {
        organizacao_atd: state.id_org
      }
    });
    setAtendimentos(response.data);
}

useEffect(() => {
    buscaAtendimentos();
}, []);

return (
  <div>      
    <form id="busca-atendimentos" >
      <main>        
        {atendimentos.map((atendimento: Atendimento) => {
          return <AtendimentoItem key={atendimento.id_atd} atendimento={atendimento}  />;
        })}
      </main>
    </form>
  </div>
);
}

export default ListaAtendimentos;

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