Estoy tratando de aplicar un filtro en una matriz de objetos con la propiedad Id para obtener la lista de elementos que comienza con el texto de una entrada. Solo tengo dos elementos en la matriz, pero si alguna vez obtengo los mismos dos elementos (renderizar como una lista).
¿Qué debo hacer para arreglar la lógica del filtro en la función SearchFilter ?
import React, { useEffect, useState } from "react" import {useSelector} from 'react-redux' import {View, Item, Text, Icon, Input, List, ListItem, Left, Thumbnail, Spinner} from 'native-base' const SearchModal =(props:any)=>{ const sessionsCata = useSelector((state)=> state.sessionsCata.sessions) const [itemsFiltered, setItemsFiltered] = useState([]) const [showSpinner, setShowSpinner] =useState(false) //filter the array objects async function SearchFilter(params:string) { setShowSpinner(true) if(sessionsCata && sessionsCata.length>0){ let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) ) if(result) setItemsFiltered(result) } await Sleep(500) //function with Promise-setTimeout setShowSpinner(false) } return( <View style={StylesSearch.containerBar} > <Item rounded style={StylesSearch.searchBar}> <Input placeholder='Id...' onChangeText={async (text) => await SearchFilter(text)} /> </Item> </View> <View> { showSpinner ? <Spinner color='grey'/> : itemsFiltered && itemsFiltered.length>0 ? ( <List> { itemsFiltered.map(item=>( <ListItem avatar key={item.id}> <Body> <Text>{item.id}</Text> </Body> </ListItem> )) } </List> ): <Text>Not items filtered...</Text> } </View> ) }No necesita usar async/await en el filtro. No es asíncrono. Además, dado que itemsFiltered es determinista (basado en el estado de sessionCata), no debería tener su propio estado.
const [prefix, setPrefix] = useState(""); const itemsFiltered = sessionsCata.filter(x => x.Id.startsWith(prefix)); // Then <Input onChangeText={setPrefix} />Cambio :
if(sessionsCata && sessionsCata.length>0){ let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) ) if(result) { if(JSON.stringify(itemsFiltered).includes(JSON.stringify(result))) return; setItemsFiltered(result) } }Finalmente lo consigo. El error fue la propiedad Id -> id.
Y salí de async del filtro, puse validación en params.
async function SearchFilter(params:string) { setShowSpinner(true) await Sleep(500) setShowSpinner(false) if(sessionsCata && sessionsCata.length>0 && params.length>0){ let result = sessionsCata.filter( x=> x.id.startsWith(params) ) if(result) setItemsFiltered(result) } }Cambiar entrada:
<Input placeholder='Id...' onChangeText={ (text) => SearchFilter(text)} />