0
269
Vistas¿Cómo filtrar múltiples opciones/cadenas de una matriz en un filtro?
Estoy tratando de implementar un menú desplegable de selección múltiple donde los usuarios pueden filtrar en consecuencia, por ejemplo, si se selecciona Live and Schedule , solo deberían aparecer los resultados que tienen estos dos criterios.
Esta es mi función de filtrado actual para el menú desplegable de selección múltiple:
Función de filtrado y manejoCambiar
const displayBulletins = bulletins .filter((bulletin) => { if (optionSelected === '') { return bulletin } else if (bulletin.liveStatus.toLowerCase().includes(optionSelected.map(item => item.value))) { return bulletin } return false }) const handleChange = selected => { setOptionSelected(selected) console.log(selected, '--optionsSelected') console.log(selected.map(item => item.value), '--mappedOptionsSelected') }; 
Mi problema actual es que, si solo selected 1 of the live status , el filtrado funciona, pero si seleccioné más de una opción, no funciona y no filtra nada, así que lo que estoy tratando de lograr aquí es para que funcione para selecciones múltiples como ["live", "schedule"] en este caso o para los 3 casos.
Aquí está mi sandbox de código como referencia:
2 Respuestas
Responde la pregunta0
La devolución de llamada del filtro debería verse así:
filter((bulletin) => { if (optionSelected.length === 0) { return true; } else { return optionSelected .map((item) => item.value) .includes(bulletin.liveStatus.toLowerCase()); } }) porque debe verificar si la matriz optionSelected tiene liveStatus pero no al revés.
Aquí está el CodeSandbox actualizado:
Por cierto, la definición de componentes de función en el cuerpo de un componente de función provoca representaciones innecesarias. En el caso de react-select , causa problemas de enfoque, es por eso que el menú desplegable no se cierra cuando se hace clic fuera.
0
El problema aquí es que optionsSelected es una matriz y bulletin.liveStatus es una matriz, por lo que debe buscar si liveStatus está en la matriz optionsSelected
Modifiqué con lo siguiente en el código sandbox y funcionó.
Además, no olvide agregar un Fragmento con una clave en lugar de <> para permitir que React funcione bien al volver a renderizar el DOM virtual.
Si desea mostrar todos los boletines si no se selecciona ninguna opción, en lugar de devolver false , debe devolver true
const displayBulletins = bulletins .filter((bulletin) => { if (optionSelected === []) { return bulletin; } else if ( optionSelected .map((item) => item.value) .includes(bulletin.liveStatus.toLowerCase()) ) { return bulletin; } return false; }) .map((bulletin) => { return ( <Fragment key={bulletin.bbID}> <BulletinList bulletin={bulletin} onDelete={onDelete} /> </Fragment> ); });