Estoy tratando de filtrar a través de una matriz de objetos (álbumes en mi caso), pero recibo este error y todo lo que intenté no funcionó.
Mi barra de búsqueda:
<input type="search" placeholder={" "} onChange={e => onChangeHandler(e.target.value)} value={text}/>Mi onChangeHandler
const onChangeHandler =(text) => { let matches = [] if (text.length > 0){ matches = albums.filter(album => { const regex = new RegExp(`${text}`, "gi") return (album.artist.matches(regex)); }); } console.log('matches', matches) setSuggestions(matches) setText(text) }Cuando lo intento, funciona y obtengo las coincidencias en la consola, pero solo si escribo todo correctamente y distingo entre mayúsculas y minúsculas. Ese no es el objetivo aunque.
return (album.artist === text);Puede usar el método include de cadenas para esto. Entonces, para tu ejemplo, algo como esto:
matches = albums.filter(album => album.artist.toLowerCase().includes(text.toLowerCase()));Si desea que la búsqueda distinga entre mayúsculas y minúsculas, debe eliminar los métodos toLowerCase.
Probablemente hay 2 problemas en su código. Primero, no parece encontrar el album.artist , así que asegúrese de que su objeto se vea correcto.
En segundo lugar, las matches() no son una función en una cadena y probablemente te referías a las match()
let albums = [{ artist: "Me" }, { artist: "You" }] const onChangeHandler = (text) => { let matches = [] if (text.length > 0) { matches = albums.filter(album => { const regex = new RegExp(`${text}`, "gi") return (album.artist.match(regex)); // Here matches => match }); } console.log('matches', matches) //setSuggestions(matches) //setText(text) } onChangeHandler("mE") onChangeHandler("me") onChangeHandler("yo")