Pobieranie danych z firestore

Question

Cześć.

Zacząłem robić bazę danych w firebase. Pobieram wartość z bazy danych i pushuje to do tablicy. Kiedy wypisuje całą tablicę to dane są poprawne, kiedy natomiast próbuje ją zmapować lub wypisać konkretny element tej tabeli to zwraca undefined. Nie bardzo rozumiem dlaczego oto kod:

import { useAuth } from '../context/AuthContext';
import { getFirestore, collection, getDocs } from "firebase/firestore";

const Tasks = () => {
    const { currentUser } = useAuth();

    let tasks = [];

    getDocs(collection(getFirestore(), 'userTasks')).then(snap => {
        snap.docs.forEach(ele => {
            if(ele.data().email === currentUser.email) {
                tasks.push({id: ele.id, ...ele.data()});
            }
        });
    }).catch(err => console.log(err));

    
    console.log(tasks); 
    /*
        [
            {
                "id": "pNH0ntPSVHdqqH5de11o",
                "tasks": {
                    "name": "Work",
                    "desc": "go to work"
                },
                "email": "test@test.com"
            }
        ]
    */

    console.log(tasks[0]) // undefined
    return ( 
        <main className="content adder">
            <div className="inner">
                <h1>Add Task</h1>
                <article className="main">
                    <ul>
                    </ul>
                </article>
                <div className="opts">
                    <input type="button" value="Add Task" />
                </div>
            </div>
        </main>
    );
}
 
export default Tasks;

console.log(tasks) wyświetla jednoelementową tablice, jednak console.log(tasks[0]) daje undefined. docelowo chce wyświtlać te dane w elemencie ul. Czy ktoś może powiedzieć dlaczego ta tablica się tak zachowuje?

Answer 1

Elementy do tablicy wstawiasz asynchronicznie, natomiast console.log wyświetla na bieżąco aktualizowaną tablicę - a nie taką, jaka była w momencie wywołania console.log. Kod wygląda na React, a więc asynchroniczne akcje powinieneś wykonywać wewnątrz hooka useEffect, zaś sama tablica powinna być stanem (jeśli chcesz ją renderować):

import { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthContext';
import { getFirestore, collection, getDocs } from "firebase/firestore";
 
const Tasks = () => {
    const { currentUser } = useAuth(); 
    const [tasks, setTasks] = useState([]); // tablica jako stan
   
    useEffect(() => {
      getDocs(collection(getFirestore(), 'userTasks')).then(snap => {
        snap.docs.forEach(ele => {
            if(ele.data().email === currentUser.email) {
                setTasks(prevTasks => [...prevTask, { id: ele.id, ...ele.data() } ]); // update stanu tablicy
            }
        });
      }).catch(err => console.log(err));
    }, []);

    /*
        [
            {
                "id": "pNH0ntPSVHdqqH5de11o",
                "tasks": {
                    "name": "Work",
                    "desc": "go to work"
                },
                "email": "test@test.com"
            }
        ]
    */

    return ( 
        <main className="content adder">
            <div className="inner">
                <h1>Add Task</h1>
                <article className="main">
                    <ul>
                    </ul>
                </article>
                <div className="opts">
                    <input type="button" value="Add Task" />
                </div>
            </div>
        </main>
    );
}
  
export default Tasks;