Estou desenvolvendo uma aplicação em React onde ela mostra uma tabela com dados de um Array que vem de uma API, coloquei um filtro para pesquisa pelo nome e a tabela se modifica de acordo com o digitado pelo usuário. O filtro até a parte que pesquisa no Array e mostra em tela esta tudo OK, o meu problema surge quando o usuário deleta o campo o Array não volta ao formato original, o que causa isso é que a função para filtrar os dados alterar o meu estado onde estão os dados originais e consequentemente alterar o componente que contem o map()
renderizando assim o meu filtro, mas ele não volta ao original ao deletar o filtro
Componente principal:
import React, {useState, useEffect} from 'react';
import './App.css';
import axios from 'axios'
import global from './Global.json'
import Table from './Table'
function Initial() {
const [data, setData] = useState([])
const [dataKeys, setDataKeys] = useState([])
useEffect( (data) => {
const fetchData = async (data) => {
try{
const requestData = await axios.get(`${global.URL}:3336/list-items/`)
setData(requestData.data)
setDataKeys(Object.keys(requestData.data[0]))
}catch(err){}
}
fetchData(data)
}, []);
function handleInput(e){
var input = document.getElementById('input-table').value
setData(searchTable(input, data))
}
function searchTable(value, data){
var filteredData = []
for(var i = 0; i < data.length; i++){
value = value.toLowerCase()
var user = data[i].usuario.toLowerCase()
if(user.includes(value)){
filteredData.push(data[i])
}
}
return filteredData
}
return(
<>
<br />
<br />
<input
className="form-input"
onKeyUp={() => {
handleInput()
}}
id="input-table"
placeholder="Ache um Usuario" />
<br />
<br />
<Table dataKeys={dataKeys} data={data} />
</>
)
}
export default Initial
Componente da tabela:
import React from 'react';
import './App.css';
const Table = ({dataKeys, data}) => (
<table className="table">
<thead className="thead-dark">
<tr>
{
dataKeys.map(keys => {
return(
<th scope="col" key={keys}>{keys}</th>
)
})
}
</tr>
</thead>
<tbody>
{
data.map(data => {
return(
<tr data={data.id}>
<th scope="row" >{data.id}</th>
<th scope="row">{data.usuario}</th>
<th scope="row">{data.telefone}</th>
<th scope="row">{data.loja}</th>
<th scope="row">{data.departamento}</th>
<th scope="row">{data.cargo}</th>
</tr>
)
})
}
</tbody>
</table>
)
export default Table
Uma das minhas soluções foi passar para o useEffect
para ele executar quando um estado timer
for alterado e na função hadleClick
eu altero ele após um setTimeout()
de 6 segundos. Porem não é uma solução elegante.
Eu to a dias sem chegar numa solução para isso.