1

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.

2
  • voce quis dizer que quando o usuario apaga tudo o que tinha escrito no campo de filtro, a tabela deve voltar a exibir todos os items novamente? Commented 10/06/2020 às 17:51
  • sim exatamente isso mas eu não consegui chegar numa logica q o React aceite, fazendo isso com jquery e ou javascript funciona porque eu tenho como controlar quando parametro de renderização
    – Geovane
    Commented 11/06/2020 às 3:01

1 Resposta 1

3

Primeiro, vamos refazer esse input da seguinte maneira:

<input
  className="form-input"
  onChange={handleInput} // nao precisa colocar {() => handleinput()}.
                         // e mude de `onKeyPress` para `onChange`.
  id="input-table"
  placeholder="Ache um Usuario"
/>

Na sua função handleInput vamos reescrever desta forma:

function handleInput(e) {
 const inputValue = e.target.value; // e.target corresponde ao elemento input.
 setData(searchTable(inputValue));  // assumindo `data` como propriedade global do 
                                    // estado Nao precisa passar como parametro.
}

Crie um estado para guardar os dados originais da sua API:

const [originalData, setOriginalData] = useState();

No seu useEffect(), salve os dados originais no originalData:

setOriginalData(requestData.data);

Agora vem o importante. Na sua função searchTable, vamos passar apenas value como parâmetro e vamos escrever um if onde se o length do value for 0, significa que o usuario apagou tudo do input, logo queremos que o estado inicial do data seja restaurado:

function searchTable(value) {
 const filteredData = [];

 if (value.length === 0) {
   return originalData; // ESTE RETORNO IRA RESTAURAR OS DADOS ORIGINAIS DO 
                       // DATA
 }

 for (let i = 0; i < data.length; ++i) {
  const newValue = value.toLowerCase(); // nao redeclare o value.

  const user = data[i].usuario.toLowerCase();

  if (user.includes(newValue)) {
    filteredData.push(data[i]);
  }
 }
 return filteredData;
}

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 .