0
190
VistasCómo filtrar una matriz de objetos en React
movies = [ { id:1, title: "movie1", genre:["action","sci-fi"], country:["usa","uk"] }, { id:2, title: "movie2", genre:["action","comedy"], country:["usa","ireland"] }, { id:3, title: "movie3", genre:["comedy","romance"], country:["ireland","uk] }, ]Quiero filtrar películas por género y país. Puedo hacer eso en un método muy extraño. Pero me pregunto cuál es el atajo de filtrado. ¿Hay alguna opción que pueda filtrar si el accesorio o los accesorios existen, si no dejo el original?
const Component = ({ genre, country }) => { const [movies,setMovies]=useState([]); const [filteredMovies,setFilteredMovies]=useState([]) useEffect(()=>{ //fetch from api and set movies },[]) useEffect(()=>{ setFilteredMovies( movies.filter((item) => { if(genre || country){ if(!country){ return item.genre.includes(genre) }elseif(!genre){ return item.country.includes(country) }else{ return item.genre.includes(genre) && item.country.includes(country) } }else return item } ) ); },[movies,genre,country]) return ( <div> {filteredMovies.map((item) => ( <Movie item={item} key={item.id} /> ))} </div> ); }3 Respuestas
Responde la pregunta0
Recomiendo usar lodash , hace que el filter sea simple
_.filter(movies , { genre: ["action"] });puede consultar la documentación: https://lodash.com/docs/4.17.15#filter
y por favor prueba mi experimento:
0
Reorganice sus datos de una manera que le permita ingresar un solo valor u objeto que pueda usarse para filtrar los datos en las películas. Por ejemplo, si organizara su filtro de esta manera: (lo que ya haría si no lo desestructurara)
const filters = { genre: 'action', country: 'ireland' };Luego, puede recorrer cada película y usar las propiedades de los filtros para acceder solo a las propiedades de una película que le gustaría verificar, como el pseudocódigo a continuación.
movie[property].includes(value)Al hacer esto, puede omitir o agregar cualquier filtro que desee.
Tenga en cuenta que en el estado actual, el fragmento a continuación asume que solo tiene que funcionar con una matriz.
const filters = { genre: 'action', country: 'ireland' }; const movies = [ { id: 1, title: "movie1", genre: ["action", "sci-fi"], country: ["usa", "uk"] }, { id: 2, title: "movie2", genre: ["action", "comedy"], country: ["usa", "ireland"] }, { id: 3, title: "movie3", genre: ["comedy", "romance"], country: ["ireland", "uk"], }, ]; const filterMovies = (movies, filters) => movies.filter(movie => Object.entries(filters).every(([key, value]) => movie[key].includes(value) ) ) const result = filterMovies(movies, filters); console.log(result);0
Para hacer esto un poco más ES6-y
movies.filter((item) =>{ const [movieGenre, movieCountry] = [item.genre.includes(genre),item.country.includes(country)] if(movieGenre && movieCountry) true if(!movieGenre && !movieCountr) false return movieGenre ? movieGenre : movieCountry })