Ante un problema, cuando cambias a una página de publicaciones, todas las publicaciones están ocultas y solo al presionar el botón
`<li onClick={()=> setFiltered(posts)}><a>All</a><span></span></li>`muestra todas las publicaciones, aunque todas las publicaciones deben mostrarse inmediatamente cuando ingresa a la página. Pero el filtro funciona bien, ¿puede señalar dónde cometí un error? En todo caso, envío las publicaciones desde firebase.
Funciones
const [posts, setPosts] = useState([]); const [filtered, setFiltered] = useState([]); const postsCollectionRef = collection(db , "posts"); const menuItems = [...new Set(posts.map((Val) => Val.category))]; useEffect(() => { const getPosts = async () => { const data = await getDocs(postsCollectionRef); setPosts(data.docs.map((doc) => ({...doc.data(), id: doc.id}))); setFiltered(posts); } getPosts(); }, []) // filter function const filterItem = (category) => { const newItem = posts.filter(newVal => newVal.category === category); setFiltered(newItem); };Categoría de botones
<li onClick={()=> setFiltered(posts)}><a>All</a><span></span></li> { menuItems.map((Val, id)=>{ return <li key={id} onClick={()=> filterItem(Val)}><a>{Val}</a><span></span></li> })}Mensajes de salida
<div className="gallery-row"> { filtered.map((posts, i) => { return( <Link key={i} to={'/product/' + posts.id}>Post</Link>) })} </div>Cuando se llama a setFiltered dentro de useEffect, el valor de las posts sigue siendo [] , el valor inicial. El problema que está experimentando se llama cierres obsoletos.
En muchos casos, esto se puede solucionar agregando el valor obsoleto a la matriz de dependencias de useEffect, pero en su caso, eso crearía un bucle infinito.
Según su código, la solución más simple es la siguiente:
useEffect(() => { const getPosts = async () => { const data = await getDocs(postsCollectionRef); const posts = data.docs.map((doc) => ({...doc.data(), id: doc.id})); setPosts(posts); setFiltered(posts); } getPosts(); }, [])