Estoy creando una aplicación tipo blog con Cloud Firestore solo como un proyecto para aprender algunas cosas. Sin embargo, tengo un problema en el que solo el último elemento de mi matriz de estado, 'blogs', se devuelve dentro del método .map.
Cualquier ayuda con esto es apreciada, gracias!
const [blogs, setBlog] = useState([]); const fetchBlogs = async () => { const response = await getDocs(collection(db, "blog posts")); let postArray = []; response.docs.forEach((blogpost) => { postArray.push(blogpost.data()); }); console.log(postArray) postArray.forEach(post => { setBlog([...blogs, post]); }); } useEffect(() => { fetchBlogs(); }, []); return ( <ul className="posts-container"> { blogs.map((blog) => { console.log(blog); //this outputs each of the individual posts, but only the last is displayed as an <li> return ( <li key={blog.title}>{blog.title}</li> ) })} </ul> )En lugar de esto:
postArray.forEach(post => { setBlog([...blogs, post]); });Intenta hacer esto:
setBlog(postArray);No estoy seguro de qué sucede exactamente, pero esta parece ser la parte más sospechosa de su código.
Está anulando la publicación del blog dos veces, inténtelo de esta manera
const fetchBlogs = async () => { const response = await getDocs(collection(db, "blog posts")); setBlog([...blogs, ...response.docs.map(blogpost => blogpost.data())]) } useEffect(() => fetchBlogs(), []);Probablemente quieras poner la respuesta en tu estado sin hacer forEach()
setBlog(postArray);O incluso (dependiendo de la estructura de datos)
const [blogs, setBlog] = useState([]); const fetchBlogs = async () => { const response = await getDocs(collection(db, "blog posts")); setBlog(response.data); // set to whatever you need } useEffect(() => { fetchBlogs(); }, []); return ( <ul className="posts-container"> { blogs.map((blog) => { return <li>( <li key={blog.title}>{blog.title}</li> ) } )} </ul> );