1

Tengo un proyecto en el cualhago peticion a una api y muestro los datos en card, ahora quiero hacer un input para filtrar el json pero hace una busqueda mal, desordenada y no entiendo porque.

aqui mi funcion:

import React, { useEffect,useState}  from 'react';
import Card from './Card';
import axios from 'axios';
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
function searchData(search){
    return function(pokemon){
      return    pokemon.name.toLowerCase().includes(search.toLowerCase())
    }
}

const PokemonList=()=> {
const url="https://pokeapi.co/api/v2/pokemon/"; 
const [search, setSearch] = useState(""); 
const [data,setData]=useState([]); 
const [filteredData, setFilteredData] = useState([]);

    const getData=async()=>{  
        await axios.get(url)
        .then(res=>{     
            setData(res.data['results']);           
        });       
    }      
        
    useEffect(()=>{    
        getData(); 
        setFilteredData(data);         
    },[data]) 
 

    return (  
    <div className="row d-flex justify-content-end">
    {filteredData?
    <>
        <div className="col-md-6 col-sm-6 mb-4"> 
        <div className="input-group mycustom">
                
            <input type="text" className="input form-control rounded-pill" placeholder="Search"     
            name="term" onChange={e => setSearch(e.target.value)} />

            <div className="input-group-prepend">
                <button className="btn btns btn-primary rounded-pill" type="submit"
                ><FontAwesomeIcon icon={faSearch} />
                </button>
            </div>
               
        </div> 
        </div>

        <div className="row"> 
            {filteredData.filter(searchData(search)).map((pokemon,key)=>{
            return(
                <Card 
                key={key}
                name={pokemon.name}
                url={pokemon.url}/>
                );
            })}
        </div>
        </>
        :
        <div>Loading...</div>
        }
    </div> 
    );
}
 
export default PokemonList;

2
  • search(data.map(...jsx))esta enviando como argumento elementos JSX a la función search, en ese arreglo de objetos row no existe la propiedad name por ende Cannot read properties of undefined. Es un buen intento para tratar de implementar un filtro de búsqueda, pero ten en cuenta el detalle que mencione. Yo intentaría crear una función handle para el search, filtrar el estado data y regresar el componente nuevamente. Saludos
    – g.4
    Commented el 13 sept. 2021 a las 0:23
  • @g.4 Ok he modificado mi código, ya no marca error pero hace la búsqueda mal Commented el 13 sept. 2021 a las 14:09

1 respuesta 1

0

Hay distintas formas de implementar un filtro de búsqueda, estos pueden ser estáticos o dinámicos.

En el caso de los filtros dinámicos, estos se modelan con el evento onKeyStroke, pues se espera que cada vez que el usuario escriba una palabra en la casilla de búsqueda, el filtro muestre los resultados de forma dinámica.


Filtro Dinámico en ReactJS

En reactJS se puede usar un elemento tipo input text, e ir capturando cada keyStroke con el evento onChange, tal cual lo intentó el OP en el código de ejemplo:

<input
        placeholder='Nombre del personaje'
        name='searchInput'
        onChange={handleOnChange}
      />

Técnica Debounce

La técnica debounce se usa para limitar el número de invocaciones al método de búsqueda, de tal forma que, en vez de invocar al mismo en cada keyStroke del usuario, debounce configura un intervalo de tiempo entre el input del usuario y la invocación al método de búsqueda. Esto puede suponer una mejora en la complejidad del tiempo según el caso de uso.

Se puede implementar debounce de forma práctica con la librería lodash; el método recibe como argumentos una función de rebote, la cual va a ser invocada en intervalos de tiempo, el segundo argumento:

//funcion de rebote (método de busqueda) emitChange
//intervalo de retardo de 500 ms
let debounceFn = _.debounce(emitChange, 500);

Entonces, el usuario puede ingresar cierto número de caracteres en la casilla de búsqueda, pero el método de búsqueda solo se invocará cada 500 ms.


Para el método de busqueda, se pueden implementar mejoras como el manejo de ciertas cadenas de caracteres, según el caso de uso. Aquí, se muestra una implementación muy elemental con el método filter:

function emitChange(name){
    const filterResults = data.filter(item=>item.name === name);
    if(filterResults.length > 0){
      setData(filterResults);
    } else {
      setReloadFlag(true);
    }
  }

Nótese la adición de una bandera reloadFlag, para hacer uso de la reactividad de reactJS y recargar los datos provenientes de la API, en caso de no encontrar ninguna coincidencia en el filtro.

En el segundo useEffect se indica el uso de setReloadFlag como función cleanup, para regresar la bandera a su estado inicial y poder disparar useEffect nuevamente en cada evento onChange:

useEffect(()=>{    
    reloadData();
    return () => setReloadFlag(false);
  },[reloadFlag]);

Finalmente, la conexión entre el método onChange y el método de búsqueda reloadData sucede a menudo,para mejorar la complejidad en el espacio, se hace uso del hook useCallback, lo que se busca es evitar que se cargen nuevas copias de la función reloadData por cada re-render en la memoria del explorador, además, data no cambiará sus contenidos a menos que se pase a la siguiente página:

const reloadData = useCallback(()=>{
    try{
      axios.get(url).then(res=>{     
        setData(res.data['results']);           
    }); 
    } catch(e){
      console.log(e.message);
    }
  },[]);

Demo JSX:

const App=()=> {
  const url="https://pokeapi.co/api/v2/pokemon/";    
  const [data,setData]=React.useState([]); 
  const [reloadFlag, setReloadFlag] = React.useState(false);
  let debounceFn = _.debounce(emitChange, 500);

  React.useEffect(()=>{    
    try{
      axios.get(url).then(res=>{   
        setData(res.data['results']);           
    }); 
    } catch(e){
      console.log(e.message);
    }
  },[]); 
  
  const reloadData = React.useCallback(()=>{
    try{
      axios.get(url).then(res=>{     
        setData(res.data['results']);           
    }); 
    } catch(e){
      console.log(e.message);
    }
  },[]);
  
  React.useEffect(()=>{    
    reloadData();
    return () => setReloadFlag(false);
  },[reloadFlag,reloadData]); 

  function handleOnChange(e){
    debounceFn(e.target.value);
  }

  function emitChange(name){
    const filterResults = data.filter(item=>item.name === name);
    if(filterResults.length > 0){
      setData(filterResults);
    } else {
      setReloadFlag(true);
    }
  }

  return (
    <React.Fragment>
      <input
        placeholder='Nombre del personaje'
        name='searchInput'
        onChange={handleOnChange}
      />
      {data.map((item,index) => {
      return <p key={index}>Nombre:{item.name} - URL: {item.url}</p>
      })}
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="root"></div>

Espero que esta respuesta sea de ayuda.

2
  • Gracias por su ayuda, he replicado el codigo pero me da un error codesandbox.io/s/serene-leftpad-f6ibc?file=/src/App.js Commented el 14 sept. 2021 a las 3:52
  • En la sección add dependencies busca lodash y le das Add, luego al inicio de tu componente agregar const _ = require("lodash")
    – g.4
    Commented el 14 sept. 2021 a las 3:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.