Mi aplicación simple tiene:
En mi aplicación, un usuario puede hacer clic y agregar una cadena a una matriz de filtros (los filtros cambian), luego me gustaría crear una nueva matriz de objs filteredUsers, enviarla a los usuarios (por setUsers (filteredUsers)) y representar una nueva lista, basada en filtros.
Cuando estoy usando una sola cadena, por ejemplo, getFilteredUsers('string') funciona, pero no puedo hacerlo con una matriz.
const users = [ { id: 849, name: 'John', city: 'London', languages: ['English'] }, { id: 294, name: 'Ola', city: 'Stockholm', languages: ['Swedish', 'English'] }, { id: 585, name: 'Stefano', city: 'Naples', languages: ['Italian', 'French'] }, { id: 946, name: 'Anna', city: 'Paris', languages: ['French'] } ] const four = document.querySelector('.four'); const arrayFilter = arr => { const newUsers = filters.map(filter => getUsers(filter)); four.textContent = JSON.stringify(newUsers); return newUsers } const test = ['French']; console.log(arrayFilter(test))También intenté usar useEffect, pero sin resultados.
jsfiddle: https://jsfiddle.net/gmp5doqv/165/
GitHub: https://github.com/lukaasz555/job-list/blob/main/components/Main/Main.tsx
Aquí hay un ejemplo de cómo realizar este filtro usando React y los métodos de matriz .some e .includes
// Get a hook function const { useState } = React; function App() { const users = [ { id: 849, name: 'John', city: 'London', languages: ['English'] }, { id: 294, name: 'Ola', city: 'Stockholm', languages: ['Swedish', 'English'] }, { id: 585, name: 'Stefano', city: 'Naples', languages: ['Italian', 'French'] }, { id: 946, name: 'Anna', city: 'Paris', languages: ['French'] } ]; const languages = [ 'English', 'Swedish', 'Italian', 'French' ]; const [selectedLangs, setSelectedLangs] = useState( Object.fromEntries(languages.map(s => [s, false])) ); function handleCheckboxClick({target}) { const { value, checked } = target; const selectedClone = structuredClone(selectedLangs); const state = selectedClone[value]; selectedClone[value] = !state; setSelectedLangs(selectedClone); } const selectedLangsThatAreTrue = Object.entries(selectedLangs) .filter(([lang, val]) => val) .map(([lang]) => lang); const targetData = users.filter( ({languages}) => languages.some(lan => selectedLangsThatAreTrue.includes(lan)) ); return ( <div className="App"> Select Languages: { languages.map(s => ( <label key={s}> {s} <input value={s} onClick={handleCheckboxClick} type="checkbox" /> </label> )) } <br /> { targetData.map(({name}) => <span key={name}> {name} </span>) } </div> ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <App /> ); .App label { user-select: none; } <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>Esta es una función para comprobar que un usuario pasa un filtro:
const checkUser = (user, filter) => user.name === filter || user.city === filter || user.languages.includes(filter);Esta es una función que verifica que un usuario pase todos los filtros:
let filters = null; const userFilter = user => { for(let i = 0, l = filters.length ; i < l ; i++) { if(!checkUser(user, filters[i])) { return false; } } return true; }Y así es como puedes usarlo:
filters = ['French', 'Naples']; filteredUsers = users.filter(userFilter); // gives Stefano, the only one with French and Naples filters = ['English']; filteredUsers = users.filter(userFilter); // gives John and Ola, the only ones with English filters = []; filteredUsers = users.filter(userFilter); // gives everyone ! filters = ['Portuguese']; filteredUsers = users.filter(userFilter); // gives no one