hoy tengo un problema con mi barra de búsqueda.
const [posts, setPosts] = useState(null) const [searchTerm, setSearchTerm] = useState("") useEffect(() => { const loadPosts = async () => { try { const post = await getAllPosts() setPosts(post) } catch (e) { alert("Couldn't load posts") } } loadPosts() }, []) return ( <div> <input type={"text"} placeholder="Search..." onChange={event => { setSearchTerm(event.target.value) }}/> </div> )}
Este es mi componente de la barra de búsqueda. En el archivo de índice, le di un accesorio con.
const [posts, setPosts] = useState([]) const [searchTerm, setSearchTerm] = useState("") useEffect(() => { const loadPosts = async () => { try { const post = await getAllPosts() setPosts(post) } catch (e) { alert("Couldn't load posts") } } loadPosts() }, []) return ( <div className={styles.posts}> <h1>Market-place Valando</h1> <SearchList title={posts.filter(post => { if (post.title.toLowerCase().includes(searchTerm.trim().toLowerCase()) && searchTerm.trim() !== "") { return post.title } }).map(titles => { { {titles.title} } } )}/> { posts.map(post => { return ( <div key={post.id} className={styles.key}> <h1>{post.title}</h1> <Image width={1000} height={1000} src={post.image}/> <p>Price: {post.price}.-</p> <p>Description: {post.description}</p> <Link href={`/posts/${post.id}`} passHref> <a>Read more</a> </Link> </div> ) }) } </div> )}
Tengo un archivo db.json que conecté con un archivo API. En este archivo Api hice todo el material de búsqueda. Este no debería ser el problema. Creo que el problema es que el filtro no funciona bien, con los títulos.
Tiene razón, el filter de JavaScript no devuelve valores de propiedad específicos, pero devuelve las entradas principales de la matriz, también conocidas como publicaciones. Entonces return post.title o return true arrojará el mismo resultado. Sin embargo, el problema en su código parece ser que no está devolviendo nada de la función de map . Todo lo que necesita hacer es cambiarlo a lo siguiente:
.map(post => post.title)