Estoy tratando de usar ".map ()" para mapear documentos que obtengo de firebase. Sin embargo, dice que .map() no es una función. El código está debajo. Básicamente, estoy tratando de obtener mis datos de Firebase, luego renderizo cada documento como un elemento.
<div{posts.map((doc) => <p>{doc.data().text}</p>)}</div>Cómo despejé la variable de publicaciones useState:
const [posts, setPosts] = useState([]);Cómo configuro la variable de publicaciones useState:
useEffect(() => { db.collection('posts').onSnapshot((querySnapshot) => { setPosts(querySnapshot); }); })Además, intenté usar ".forEach". Puedo "console.log" cada documento usando ".forEach" pero ".forEach" no permite devolver elementos .
primero registre su querySnapshot y vea si es una matriz, luego debe verificar si la matriz de las publicaciones no es nula. prueba esto :
<div{posts.length > 0 ? posts.map((doc) => <p>{doc.data().text}</p>) : null}</div>.forEach se puede usar sobre Sets, Maps y Arrays , mientras que .map solo se puede usar sobre matrices. Por lo tanto, es probable que querySnapshot devuelva un conjunto que se actualiza en las posts , dado que las posts ahora son un Set , el map no puede iterar y devolver valores de las posts iterables. Para superar esto, puede convertir el Conjunto en una matriz antes de actualizar el estado.
useEffect(() => { db.collection('posts').onSnapshot((querySnapshot) => { let querySnapshotToArray = Array.from(querySnapshot) setPosts(querySnapshotToArray); }); }) Ahora que la post es una matriz, puede mapearla y devolver los valores requeridos.
cuando el componente de reacción procesa la primera vez que las publicaciones son null o undefined , por lo que .map no estaba definido , debe usar el encadenamiento opcional, representado por ?. en JavaScript, que es una nueva característica introducida en ES2020.
<div{posts?.map((doc) => <p>{doc?.data()?.text}</p>)}</div>