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
– Stuck, Commented May 28, 2020 at 21:45
Ok, but how can I do it ? and why then console display new_members but members doesn't ? — poldeeek
– poldeeek, Commented May 28, 2020 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
– Stuck, Commented May 28, 2020 at 21:50
Does this answer your question? 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
– Drew Reese, Commented May 28, 2020 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
– Drew Reese, Commented May 28, 2020 at 21:57

Shubham Khatri · Accepted Answer · 2020-05-29 06:34:10Z

1

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);
   } 
}

answered May 29, 2020 at 6:34

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't display elements of array React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related