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>