Nie wyświetlanie się elementów tablicy Firebase

Question

Napisałem aplikację, która pobiera z bazy danych informacje o wydarzeniu. W wydarzeniu znajduje się tablica referencji do użytkowników uczestniczących. Informacje o wydarzeniu przekazuje w propsach do innego komponentu. Mój problem polega na tym, że nie aplikacja nie chce wyświetlić tych użytkowników. Z tego co widzę po console logach i stanie komponentu wszystko działa. Jedna dziwna rzecz to tutaj :
 

        console.log(new_members)
        setMembers(new_members)
        console.log(members)

Pierwszy console.log(new_members) poprawnie wyświetla moją tablicę, jednak drugi wyświetla ją jako tablicę pustą.

 

    const [members, setMembers] = useState([])

    useEffect( () => {
        console.log("ha")
        getMembers();
    }, [props.event])

    const getMembers = async () => {
        let new_members = [];
        console.log(props.event)
         props.event &&  props.event.uczestnicy.map( async member => {
            member.get().then(doc => {
                let new_member;
                new_member = {
                    ...doc.data(),
                    id: doc.id
                }
                new_members.push(new_member)
            })
        })        
        console.log(new_members)
        setMembers(new_members)
        console.log(members)
    }

I kod wyświetlenia :
 

                {members && members.map(member => {
            console.log(member)
            return(
                <div key={member.id}>
                    {member.nick}
                </div>
            )
        })}

 

Comments

Co napełnia tablicę members? Czy kod z drugiego bloczka coś wyświetla - masz tam sprawdzanie czy members jest truthy (jako nawet tablica - jest), ale skoro tablica jest pusta, to members.map się pewnie nie odpala? 

---

Nic się nie wyświetla przy funkcji .map(member => {...}). Co ciekawe mam guzik w innym komponencie, który dodaje lub usuwa z wydarzenia akutalnego użytkownika. Jeśli dodam się pierwszy raz - tablica ładnie się wyświetla nawet z dodanym właśnie użytkownikiem. Jeśli jednak opuszczę wydarzenie elementy znów się nie wyświetlają już w ogóle (nawet jeśli z powrotem się dodam). Jednak w konsoli mogę zobaczyć rezultat console.log(member), który znajduję się w tej funkcji .map().

Może będzie prościej jeśli dodam te dwa komponenty w całości :P - https://codesandbox.io/s/gracious-snow-1ypoe?file=/src/eventUsers.js

---

Nic się nie wyświetla przy funkcji .map(member => {...})

+

Jednak w konsoli mogę zobaczyć rezultat console.log(member), który znajduję się w tej funkcji .map().

To kiedy w callbacku przekazanym do members.map coś się pokazuje?

Ponawiam pytanie - co napełnia tablicę members (po nazwie domyślam się, że funkcja setMembers, ale w jaki sposób to robi)?

---

Czy jeśli z tych trzech linijek:

console.log(new_members)
setMembers(new_members)
console.log(members)

w pierwszej zapiszesz console.log(JSON.parse(JSON.stringify(new_members))) , to co pokazuje konsola?

---

"To kiedy w callbacku przekazanym do members.map coś się pokazuje?" - Po jakichś zmianach w props.event. Wyświetla mi w konsoli tak jakby poprzedni stan tablicy members.

(mówię tylko o konsoli - na ekranie dalej nic)

A funckja setMembers jest elementem hook'a useState z React.js. Wygląda tak :
 

const [members, setMembers] = useState([])

, gdzie members jest zmienną, a setMembers funkcją w której przekazujemy nową zawartość, która ma się znaleźć w memberes. useState([]) - w nawiasie jest stan początkowy zmiennej members. 

Co do ostatniego pytania :
 

        console.log("JSON.parse(JSON.stringify(new_members))",JSON.parse(JSON.stringify(new_members)))
console.log("new_members",new_members)

Wynik w consoli :

Jeśli to pomoże to wrzuciłem pełny kod tych 2 komponentów :

https://codesandbox.io/s/gracious-snow-1ypoe?file=/src/eventUsers.js

Answer 1

Nie mam doświadczenia w React, ale z dokumentacji state hook'a wynika, że drugi element tablicy zwracanej przez useState([]) - funkcja setMembers - służy do aktualizacji pierwszego elementu z tablicy (zmiennej members). Skoro console.log wypisujący "świeżą" wartość new_members pokazuje pustą tablicę, to obstawiam że przyczyną braku aktualizacji jest asynchroniczne uzupełnianie tablicy new_members (linia 18):

new_members.push(new_member)

Spróbuj umieścić:

setMembers(new_members)
console.log(members)

pod 18 linią (czyli na dole callbacka przekazanego do then) i powinno działać.

Comments

         props.event &&  props.event.uczestnicy.map( async member => {
            member.get().then(doc => {
                let new_member;
                new_member = {
                    ...doc.data(),
                    id: doc.id
                }
                new_members.push(new_member)
                setMembers(new_members)
            })
        })    

Zrozumiałem cię w ten sposób i na chwilę obecną wyświetla się tylko jeden użytkownik. 

---

W którym miejscu wyświetla się tylko jeden użytkownik? Pokaż jeszcze w konsoli new_members oraz members po wywołaniu setMembers(new_members) w then.

A czy ten then odpala się za każdym razem gdy wykonujesz akcję dodawania użytkownika z aplikacji w przeglądarce? W then tworzony jest nowy member, dodawany do tablicy new_memers i na jej podstawie aktualizowana jest tablica members.

---

Ogólnie każda akutalizacja stanu - useState - setMembers() u nas wywołuje re-render interfejsu aplikacji, może to jest ważne. 

 

        props.event &&  props.event.uczestnicy.map(member => {
            member.get().then(doc => {
                let new_member;
                new_member = {
                    ...doc.data(),
                    id: doc.id
                }
                new_members.push(new_member)
                setMembers(new_members)
                console.log('new_members',new_members)
                console.log('members state', members)
            })

        }) 

Takie jest wyjście ostatnie w konsoli. Jednak w interfejsie aplikacji pokazuję się pierwszy z tych dwóch użytkowników. Dodatkowo React pozwala mi podejrzeć aktualny 'state' - czyli zawartość members w tym przypadku i jest on taki :

---

Spróbuj w linii zapisać tak (funkcja aktualizująca stan przyjmuje callback, który jest odpalany po re-renderze i można w nim ponoć aktualizować state):

setMembers(prev => {
    prev.push(new_members);
    return prev;
});

Jeśli nie pomoże, to poszukaj w Google o aktualizacji state'u w React - ja, jak wspomniałem, nie mam w nim doświadczenia, więc w temacie wiem mniej niż Ty.

---

Też mi się wydaje, że problem leży bardziej po stronie React. No nic, będę próbował dalej. Dzięki za czas :P

---

Miałeś rację na początku. Problem był w asynchroniczności ustawiania użytkowników. Pomogło Promise.all :
 

    const getMembers = async () => {
        if(props.event) {
            const new_members  = await Promise.all(props.event.uczestnicy.map(member => {
                return member.get().then(doc => {
                    let new_member;
                    new_member = {
                        ...doc.data(),
                        id: doc.id
                    }
                    return new_member
                })
            }))
            setMembers(new_members)
        }
    }

 

---

Super. :) Czyli teraz kod czeka na pobranie wszystkich uczestników i dopiero wtedy aktualizuje state, bo dotychczas map nie zwracał Promisa z nowo pozyskanym new_member.