useEffect(() => { cat && setFilteredProducts( products.filter((item) => Object.entries(filters).every(([key, value]) => item[key].includes(value) ) ) ); }, [products, cat, filters]);He estado viendo el video, una y otra vez, pero parece que no puedo entenderlo correctamente, ¿alguien puede ayudarme a explicar esto línea por línea? Entiendo el punto sobre "cat &&" , pero el resto me confunde.
Pasando por el código anterior línea por línea:
Supongo que tiene una variable de estado con una función setFilteredProducts y dos matrices de products y filters , cada uno con objetos como valores.
Estamos configurando valores en la variable de estado a partir de los valores filtrados almacenados en la variable de products .
Object.entries simplemente devuelve una matriz, donde cada elemento es una matriz con su primer valor como claves y el segundo valor como el valor correspondiente, every una es otra función que se aplica en la matriz devuelta por la función Object.entries
La función every toma una función de devolución de llamada como argumento, que prueba si todos los elementos en la matriz pasan la prueba implementada por la devolución de llamada.
En este caso, la prueba implementada es item[key].includes(value) , que prueba si cada elemento iterado (un objeto) en la matriz de productos tiene una matriz correspondiente a la key con value en ella.
Puede Object.entries aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
Array.prototype.every : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
Array.prototype.filter : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Array.prototype.includes : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes