How to fire event once loading the form?

Asked

Viewed 29 times

-1

I have a form that receives parameters with which I perform a get on the server, bringing and rendering the information to the user.

Currently this get is done by calling a function on onClick of a button (as in the code below, calls the Function searches through the onClick={Search} ). As I already have the initial parameters for search, I would like that once the form was "loaded" already trigger the event and present the information on screen, a kind of event "onShow()", but there is nothing similar, as we have the onClick().

How could I do that with Act? All help is welcome!

Following is sample code:

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;
react typescript

  • useEffect is fired as soon as the screen renders, you can do it right now..

  • Perfect, it was exactly what I needed. In my first steps with React! Thanks for the tip!

1 answer

0

Record the solution to others like me who are in the first steps with React. Quite simple the solution presented by Jonathan CR and Rafael Tavares, through useEffect(). To them my thanks!

I simply added the useEffect() calling the function Preferences(), with the care of passing the empty array [], to perform the call only once and not keep repeating infinitely. The simplified code was thus:

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;

Browser other questions tagged react typescript

You are not signed in. Login or sign up in order to post.