He estado tratando de crear una aplicación de chat usando reaccionar y firebase solo para practicar, ya que quería probar Firebase, y aunque puedo imprimir la variedad de objetos que recuperé en la consola, parece que no puedo para acceder a esos objetos directamente... Por ejemplo:
si codifico " console.log(testArray); " esto es lo que se muestra en la consola, lo cual está bien
0: {name: 'JohnDoe', profile_image: 'URL de imagen imaginaria', date: it, message: '¡Este es mi primer mensaje a Firebase!'}
pero si pruebo console.log(testArray[0]); se muestra indefinido en la consola
Aquí está mi código
import Config from './config'; import { initializeApp } from "firebase/app"; import { getFirestore, addDoc, getDocs, collection, query, orderBy } from "firebase/firestore"; function App() { const firebaseApp = initializeApp(Config); const firestore = getFirestore(); const chat_collection = collection(firestore, "chat"); const addData = () => { addDoc(chat_collection, { date: new Date(), message: document.getElementById("message").value, name: "JohnDoe", profile_image: "imaginary image URL" }); } let testArray = []; const readData = async () => { const chatAppQuery = query( collection(firestore, 'chat'), orderBy('date') ); const chatSnapshot = await getDocs(chatAppQuery); chatSnapshot.forEach((message) => { testArray.push({ name: message.data().name, profile_image: message.data().profile_image, date: message.data().date, message: message.data().message }); }); } readData(); console.log(testArray); console.log(testArray[0]);Es la primera vez que pido ayuda aquí, ¡lo agradecería profundamente!
Dado que readData es una función async , debe usar await (o then() para esperar los resultados.
Asi que:
await readData(); // 👆 console.log(testArray); console.log(testArray[0]); Si está en un contexto en el que no puede usar async / await , también puede usar entonces:
readData().then(() => { // 👆 console.log(testArray); console.log(testArray[0]); })