Array is looking empty, but have 4 objects

Question

I make a async function to get offers, and add to array with another array. But the offers array are looking empty in console, but when I click shows the itens.

The products are comming that's isn't the problem. The problem is that I can't add the arrayOffers to itemsArray.

OBS: the forEach is from p-interation lib.

this is my code.

useEffect(() => {
        if (auth && auth._id) {
            const fetchUserVisitedProducts = async (id) => {
                const user = await getPublicUserRequest(id);
                let array = [];

                forEach(user.offers_visited, async (id) => {
                    const offers = await getOfferRequest(id)
                    array.push(offers)
                });
                const arrayOffers = array;
                console.log(arrayOffers)
                const itemsArray = [ ...user.barbadas_visited, ...arrayOffers]
                console.log(itemsArray)
                
            }    
            fetchUserVisitedProducts(auth._id)
        }
  
    },[auth])

In the image, I see one array with 4 objects, but looks empty. And another array that is correct.

Looks like an async issue, you're not awaiting your `forEach()` call before logging so it's empty when first logged, but Chrome logs live arrays, so it gets updated in the view later. — pilchard, Jan 25 '22 at 18:21
`Array is looking empty, but have 4 objects` The reason for this is answered here: [console.log of element.children shows 0 length but has three entries when expanded later](https://stackoverflow.com/questions/38660832/console-log-of-element-children-shows-0-length-but-has-three-entries-when-expand) — t.niese, Jan 25 '22 at 18:30

score 3 · Answer 1 · answered Jan 25 '22 at 18:23

3

Try replacing the

 forEach(user.offers_visited, async (id) => {
    const offers = await getOfferRequest(id)
    array.push(offers)
 });

with

  for (const id of user.offers_visited) {
    const offers = await getOfferRequest(id)
    array.push(offers)
  }

as forEach is not meant to be used with async.

answered Jan 25 '22 at 18:23

Gabriele Petrioli

191,379
34
261
317

This `forEach` is from `p-interation` lib, and work I another async function. PS: I try your code but didnt work :( – JoaoVitorLima Jan 25 '22 at 18:33
1

@JoaoVitorLima that’s an important information that belongs to the question. Anyhow, the `forEach` of p-interation returns a promise so `await forEach(…`. But if `user.offers_visited` is an array the `for … of` solution has to work. – t.niese Jan 25 '22 at 18:43
I try to add `for .. of`, but shows `Warning: Each child in a list should have a unique "key" prop.` in console. – JoaoVitorLima Jan 25 '22 at 19:09
1

@JoaoVitorLima That is a react error not related to the shown code. – t.niese Jan 25 '22 at 19:59
The for…of didnt work. Because, everthing after the function arent working. – JoaoVitorLima Jan 25 '22 at 23:14

Array is looking empty, but have 4 objects

1 Answers1