-1

sou novo no React e estou com dificuldade para fazer um filtro em dados que serão exibidos em uma tabela. Tenho os inputs dos filtros (são 5 no total) e um botão filtrar que chama uma função, nessa função tenho o setState que alimenta o state que contém as informações. O lance é que, por ser assíncrono, o useState só filtra os dados quando eu clico pela segunda vez no botão 'filtrar', como poderia fazer para esse filtro ser executado imediatamente? Abaixo um trecho do código:

 const [data, setData] = useState([]);  
 const [data_filter, setDataFilter] = useState([]);

 setData(data);
 setDataFilter(data); 

**Variavel 'data' contem todos os dados do db retornados pelo axios (get)

 function handleFiltro() {  
     if (numero) {  
       const p_filter = data_filter.filter(id => {  
         return id.id == numero;  
       });  
       setDataFilter(p_filter);  
     }    
     const data1 = data_filter.map(data => ({
       ...data,
       emissao: format(parseISO(data.createdAt), "d 'de' MMMM 'de' yyyy", {
         locale: pt,
       }),
       expiracao: format(parseISO(data.expire_at), "d 'de' MMMM 'de' yyyy", {
         locale: pt,
       }),
     }));


     setData(data1);
  }

  <button type="button" onClick={() => handleFiltro()}>
     <span>Filtrar</span>
  </button>
2
  • Dentro de sua função "handleFiltro", tente fazer o setData desta forma: setData([...data1]);
    – Bins
    26/10/2019 às 19:32
  • Fiz o teste e continua da mesma forma, só funciona com 2 clicks no botão filtrar... 26/10/2019 às 20:01

1 Resposta 1

0

A melhor forma de resolver esse problema é com o hook useEffect, fazendo com que ele assista o estado data_filter e apenas dispare o setData após a atualização ter sido concluída. Ficaria assim:

function handleFiltro() {  
  if (numero) {
    const p_filter = data_filter.filter(id => {  
      return id.id == numero;  
    });

    setDataFilter(p_filter);  
  }   
}    

useEffect(() => {
  const data1 = data_filter.map(data => ({
    ...data,
    emissao: format(parseISO(data.createdAt), "d 'de' MMMM 'de' yyyy", {
    locale: pt,
    }),
    expiracao: format(parseISO(data.expire_at), "d 'de' MMMM 'de' yyyy", {
    locale: pt,
    }),
  }));

  setData(data1);
}, [data_filter]);

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 .