Данные приходят позже

Question

В useEffect получаю данные с Firestore Database. Думаю нужно добавить async await только незнаю как это сделать

Пробный метод ниже выводит ошибку

collection is not a function

const citiesRef = db.collection('users');
const snapshot = await citiesRef.get();
snapshot.forEach(doc => {
  console.log(doc.id, '=>', doc.data());
});

компонента App.js

import { useEffect } from 'react';
import './App.css';
import { Main } from './Components/Main/Main';
import { LeftSidebar } from './Components/LeftSidebar/LeftSidebar';
import { db } from './config';
import { collection, getDocs } from 'firebase/firestore'
function App() {
    const users = []
    useEffect(() => {
        getDocs(collection(db, 'users'))
            .then(snapshot => {
                snapshot.forEach(doc => {
                    console.log(doc.data());
                    users.push(doc.data())
                    console.log(users);
                });
            })
    }, [])

    return (
        <div className="App">
            <div >
                <LeftSidebar />
                <Main users={users} />
            </div>
        </div>
    );
}

export default App;

config.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx",
    appId: "xxxxx",
    measurementId: "xxxxx"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)
export const db = getFirestore(app)

компонента Main.js

import React from 'react'
import './Main.scss'
import { Header } from '../Header/Header'
import { User } from './User'
export const Main = ({ users }) => {
    console.log(users)

    return (
        <div className='Main'>
            <Header />

            <div className='Main__container'>
                <h1 className='Main__name'>Website Design</h1>
                <div className='Main__sector'>
                    <div className='Main__tabs'>
                        <div className='Main__all-tasks active'>All Tasks</div>
                        <div className='Main__todo'>To Do</div>
                        <div className='Main__in-progress'>In Progress</div>
                        <div className='Main__completed'>Completed</div>
                    </div>
                </div>
                <div className='Main__cards'>
                    <div className='Main__card'>
                        <div className='Main__tags'>tag</div>
                        <div className='Main__card-name'>Name</div>
                        <div className='Main__card-description'>description</div>
                    </div>
                    <div className='Main__card'>
                        <div className='Main__tags'>tag</div>
                        <div className='Main__card-name'>Name</div>
                        <div className='Main__card-description'>description</div>
                    </div>
                    <div className='Main__card'>
                        <div className='Main__tags'>tag</div>
                        <div className='Main__card-name'>Name</div>
                        <div className='Main__card-description'>description</div>
                    </div>
                    <div className='Main__card'>
                        <div className='Main__tags'>tag</div>
                        <div className='Main__card-name'>Name</div>
                        <div className='Main__card-description'>description</div>
                    </div>
                    <div className='Main__card'>
                        <div className='Main__tags'>tag</div>
                        <div className='Main__card-name'>Name</div>
                        <div className='Main__card-description'>description</div>
                    </div>
                </div>
                <div className='Main__users'>
                    {
                        users.length == 0
                            ? <h4>Emty</h4>
                            : users.map((user) =>
                            (
                                <>
                                    <User name={user.age} />
                                </>
                            )
                            )
                    }
                </div>
            </div>
        </div>
    )
}

компонента User.js

import React from 'react'

export const User = ({ name }) => {
    return (
        <div>{name}</div>
    )
}

Сначало приходит пустой массив потом данные

В итоге вместо элементов у меня отображается <h4>Emty</h4>

Answer 1

Переменная users должна быть переменной состояния, тогда реакт будет реагировать на изменение и перерисовывать компонент:

// создаем переменную состояния
const [ users, setUsers ] = useState([]);
useEffect(() => {
    getDocs(collection(db, 'users'))
        .then(snapshot => {
             // после получения ответа
             // создаем новый массив
             const newUsers = [];
             snapshot.forEach(doc => {
                console.log(doc.data());
                // пушим данные
                newUsers.push(doc.data())
                console.log(users);
            });
            // сохраняем данные в состоянии
            setUsers(newUsers);
        })
}, [])

БЛОГ НА HUSL

Данные приходят позже

Ответы (1 шт):