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.
search(data.map(...jsx))
esta enviando como argumento elementos JSX a la funciónsearch
, en ese arreglo de objetosrow
no existe la propiedadname
por endeCannot 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 elsearch
, filtrar el estadodata
y regresar el componente nuevamente. Saludos