Can't display elements of array React

Question

I can see my array in state, but I don't know why elements of array doesn't display on the app interface.

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

useEffect( () => {
    getMembers();
}, [props.event])



const getMembers = () => {
    let new_members = [];
    console.log(props.event)
    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)
    console.log(members)    
}

[...]

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

So I can see this array in Components using React Developer Tools, but even console.log doesn't see it in the moment of performing.

And console.log(new_members) and console.log(members) result :

You need to wait for the promis to resolve before trying to use it. — Stuck, May 28 '20 at 21:45
Ok, but how can I do it ? and why then console display `new_members` but `members ` doesn't ? — poldeeek, May 28 '20 at 21:47
The first log displays the values because they are set. But `setMembers` requires another render before the `members` are actually set and the log statement is ofc executed within the same render so it is still unset in that moment. — Stuck, May 28 '20 at 21:50
Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) I know you're using `useState` hook, but the concept of react lifecycle is identical. This question is asked almost daily, please search to see if your issue has already been asked and has an accepted solution. — Drew Reese, May 28 '20 at 21:51
Also, you've no asynchronous code so each iteration of array::map updates state with the same initial empty `newMembers` array. — Drew Reese, May 28 '20 at 21:57
Ok. I added async. And now I understand why console.log() doesn't work. But I still don't understand why this array doesn't display in application interface... Maybe it will be easier if I give you all component code - https://codesandbox.io/s/broken-brook-bhs7v?file=/src/App.js — poldeeek, May 28 '20 at 22:01
Just `.map()` doesn't show this array, but I see in React Developer Tools that this array is there... — poldeeek, May 28 '20 at 22:11

score 1 · Accepted Answer · answered May 29 '20 at 06:34

Your member values are fetch asynchronously, so its ideal if you set state only after all the values are resolved. For this you can use a Promise.all

const getMembers = async () => {
    let new_members = [];
    console.log(props.event)
    if(props.event) {
      const val  = 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(values);
     console.log(values);
   } 
}

Can't display elements of array React

1 Answers1