issue accessing Array Items returned from Async call

Question

I am returning an array from an async call in my action which then gets passed down to the reducer and finally back into the React. However, whenever I try to access the elements inside I get an error. My first guess was maybe my async call is wrong so I console.log everywhere. But everything seems fine except when I try to map over the array.

Here is the sequence of steps:

Dispatch Action:

.then(feeds => {
            console.log('Sending data to dispatch');
            console.log(`Testing this function -> ${JSON.stringify(feeds)}`);
            dispatch({
                type: 'RETRIEVE_FEEDS',
                payload: feeds,
            });

Initially feeds is an empty array in my reducer which then gets populated with this array.

Reducer:

 case 'RETRIEVE_FEEDS': {
            return { ...state, feeds: action.payload };
        }

Now in my mapStateToProps I receive the initial empty array and then the populated array from dispatch.

const mapStateToProps = ({ feedState }) => {
    const { feeds } = feedState;
    console.log(`FeedState -> ${JSON.stringify(feedState.feeds)}`);
    console.log(`Is Array -> ${Array.isArray(feedState.feeds)}`);
    console.log(`Going to map through the array`);
    feedState.feeds.map(feed =>{
        console.log(`Feed -> ${JSON.stringify(feed)}`)
        console.log(`Feed ID -> ${feed.feedID}`)
    });
    return { feeds };
};

My only issue is that whenever I try to get something from the array it gets undefined.

These are my logs:

FeedState -> []

Is Array -> true

Going to map through the array

Sending data to dispatch

Testing this function -> [[{"feedID":"57dfnQuwUghupbRB7EEB","uploadedBy":"8Vmr0ZnVDPfgkCqSBWHXjaVEDYH3","videoURL":"","datePosted":"2017-12-08T14:24:37.323Z","tags":[],"isLike":false,"likes":{"countLikes":0}}],[{"feedID":"reYEcurssCV32WyQgOYp","uploadedBy":"8Vmr0ZnVDPfgkCqSBWHXjaVEDYH3","videoURL":"","datePosted":"2017-12-08T14:46:13.655Z","tags":[],"isLike":false,"likes":{"countLikes":0}}]]

FeedState -> [[{"feedID":"57dfnQuwUghupbRB7EEB","uploadedBy":"8Vmr0ZnVDPfgkCqSBWHXjaVEDYH3","videoURL":"","datePosted":"2017-12-08T14:24:37.323Z","tags":[],"isLike":false,"likes":{"countLikes":0}}],[{"feedID":"reYEcurssCV32WyQgOYp","uploadedBy":"8Vmr0ZnVDPfgkCqSBWHXjaVEDYH3","videoURL":"","datePosted":"2017-12-08T14:46:13.655Z","tags":[],"isLike":false,"likes":{"countLikes":0}}]]

Is Array -> true

Going to map through the array

Feed -> [{"feedID":"57dfnQuwUghupbRB7EEB","uploadedBy":"8Vmr0ZnVDPfgkCqSBWHXjaVEDYH3","videoURL":"","datePosted":"2017-12-08T14:24:37.323Z","tags":[],"isLike":false,"likes":{"countLikes":0}}]


Feed ID -> undefined

I am simply mapping over the array in the mapStateToProps function — Kamil Kamili
– Kamil Kamili, Commented Dec 10, 2017 at 12:09
you map function doesn't do anything, why don't you do a foreach instead ? — klugjo
– klugjo, Commented Dec 10, 2017 at 12:10
Shouldn't your final console.log be "console.log(Feed ID -> ${JSON.stringify(feed).feedId})"? — James Hibbard
– James Hibbard, Commented Dec 10, 2017 at 12:11
In the mapStateToProps function try returning something using the return keyword — theterminalguy
– theterminalguy, Commented Dec 10, 2017 at 12:13

dashton · Accepted Answer · 2017-12-10 12:16:49Z

1

It looks like, from your logs, that each item in feedState.feeds is an array. So feed.feedID won't work. feed[0].feedID would work.

Also your .map function should return something and you should do something with your mapped array. i.e. result of feeds.map

answered Dec 10, 2017 at 12:16

dashton

2,7341 gold badge18 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

issue accessing Array Items returned from Async call

1 Answer 1

Comments

Your Answer

Collectives™ on Stack Overflow

issue accessing Array Items returned from Async call

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related