Reactjs array push not working in async function

Question

 const [cart, setCart] = useState({})

    useEffect(()=>{
        const items = JSON.parse(localStorage.getItem('cart')); // return [5,6]
        let array = [];
        if(items && items.length){
            items.map(function (cart_id){
                getPack(cart_id).then((result)=>{
                    array.push(result.data) // not working
                    console.log(result.data) // got data as object!
                })
            })
            setCart(array);
            console.log(array); // return empty
        }
    }, []);

    const getPack = async(id) => {
        return await Api.Get('getPack', false, false, id); // get data from api
    }

What I trying to do is after get data from api from async function called getPack set it to object. I got data from getPack but I want to set it to array, I used array.push but it's not working. Any idea what is wrong?

Mykyta Halchenko · Accepted Answer · 2022-09-01 10:54:34Z

1

You return promise which is async, so your code console.log(array); will be executed before you get the response from your endpoint and entering inside callback in then. In other words, there is no guarantee that your code after getPack(cart_id).then will be execute when array is fields because it is asynchronous.

As an option create an additional state for your array instead of declaring it inside the useEffect:

const [array, setArray] = useState([])
useEffect(()=>{
    const items = JSON.parse(localStorage.getItem('cart')); // return [5,6]
    if(items && items.length){
        items.map(function (cart_id){
           getPack(cart_id).then((result)=>{
                setArray(oldArray => [...oldArray, result.data]) 
                console.log(result.data)
            })
        })
        console.log(array); // return empty
    }
}, []);

const getPack = async(id) => {
   return await Api.Get('getPack', false, false, id); // get data from api
}

edited Sep 1, 2022 at 10:54

answered Sep 1, 2022 at 10:26

Mykyta Halchenko

8181 gold badge6 silver badges26 bronze badges

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

4 Comments

Jack The Baker Over a year ago

Error: TypeError: Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method. on this line=> setArray([...array, ...result.data])

Mykyta Halchenko Over a year ago

@tourtravel if result.data is object, I updated, I thought this is an array.

Jack The Baker Over a year ago

It working fine but there is one problem, array contains one object, while result.data has many objects, seems it replacing not add every object to array.

Mykyta Halchenko Over a year ago

@tourtravel try setArray(oldArray => [...oldArray, result.data] );

Pedram · Accepted Answer · 2022-10-10 11:43:10Z

1

You could use Promise.all() and create array, there is no need to use oldArray !

const [cart, setCart] = useState({})

    useEffect(()=>{
        const items = JSON.parse(localStorage.getItem('cart'));
        if(items && items.length){
            let promises = items.map(function(cart_id){
                return getPack(cart_id).then(function(result){
                    return result
                })
            })
            Promise.all(promises).then(function(results) {
                setCart(results)
            })
        }
    }, []);

    const getPack = async(id) => {
        return await Api.Get('getPack', false, false, id);
    }

answered Oct 10, 2022 at 11:43

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Comments

Roman Azeem · Accepted Answer · 2022-09-01 10:49:47Z

0

You need to look into the response of "Api.Get" method.

const [cart, setCart] = useState([]) //changed {} to []

useEffect(()=>{
    const items = JSON.parse(localStorage.getItem('cart')); // return [5,6]
    let array = [];
    if(items && items.length){
        items.map(function (cart_id){
            getPack(cart_id).then((result)=>{
                array.push(result) // its working perfect my side
                console.log(result) // got data as object!
            })
        })
        setCart(array);
        console.log(array); // return array of objects
    }
}, []);

const getPack = async(id) => {
    return {data:1} 
    //await Api.Get('getPack', false, false, id); // get data from api
}

edited Sep 1, 2022 at 10:49

answered Sep 1, 2022 at 10:44

Roman Azeem

367 bronze badges

Comments

Vlado · Accepted Answer · 2022-09-01 14:39:29Z

This part is not correctly written:

let array = [];
if(items && items.length){
    items.map(function (cart_id){
        getPack(cart_id).then((result)=>{
            array.push(result) // its working perfect my side
            console.log(result) // got data as object!
        })
    })
    setCart(array);
    console.log(array); // return array of objects
}

I haven't got a chance to test this particular piece of code but you'd better try something like:

if(items && items.length){
    let array = items.map(function (cart_id){
        return getPack(cart_id).then((result)=>{
            return result.data;
        })
    })
    setCart(array);
}

This way you loop items and assign to each new 'array' element the result of each promise resolved from the async method 'getPack(cart_id)'

Collectives™ on Stack Overflow

Reactjs array push not working in async function

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related