Aquí está mi código:
import firebase from "../Firebase.js"; import {ThemeProvider} from "@mui/material"; import Post from "../components/posts/Post"; const firestore = firebase.firestore(); function AllPostsPage(props) { const posts = firestore.collection("posts"); function myFunc() { posts.get().then((result) => { result.docs.forEach((post) => { console.log(post.data().poster); }) }) } return ( <ThemeProvider theme={props.theme}> {posts.get().then((result) => { result.docs.map((post, index) => { return <Post theme={props.theme} key={index} title={post.data().title} desc={post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl} comments={post.data().comments} /> }) })} </ThemeProvider> ); } export default AllPostsPage;Intenté buscar otras soluciones, pero todas decían que no debería usar código asíncrono en reaccionar. No estoy definiendo ningún código asíncrono en esta página, así que estoy un poco atascado aquí.
Debe mover su lógica asíncrona fuera de su declaración de devolución. Está obteniendo datos de api aquí y está usando then() aquí, que es lógica asíncrona.
Puede definir un estado con el enlace useState y almacenar la información allí, luego use el estado para representar sus publicaciones. Escriba su lógica asíncrona en una función y llámela en un useEffect con una matriz de dependencia vacía para que se llame cuando se monte el componente.
Primero importas ganchos:
import React, { useEffect, useState } from "react";Luego defina el estado en AllPostsPage:
const [postsData, setPostsData] = useState([]);Luego escribe tu lógica asíncrona en una función y llámala en useEffect:
const getPosts = async () => { try { const response = await posts.get(); setPostsData(response.data.data); } catch(e) { console.log(e);} } useEffect(() => { getPosts(); }, []}Y finalmente use su estado para hacer una declaración de devolución. Algo como esto va entre las etiquetas de ThemeProvider:
{postsData.docs.map((post, index) => ( <Post theme={props.theme} key={index} title={post.data().title} desc= {post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl} comments={post.data().comments} /> )}