When attempting to request data from my API in this manner:
export default ({ navigation }) => {
// Call getMovieImages with the id of the likedMovies from the state.likedMovies
const { getMovieImages, state:{ likedMovies }} = useContext(MovieContext);
likedMovies.map(async (item, index) => {
const data = await getMovieImages(likedMovies[index])
console.log(data)
})
return (
<SafeAreaView style={styles.container}>
<Text>You liked {likedMovies.length} movies!</Text>
<View style={styles.navBar}>
.
.
.
</View>
</SafeAreaView>
)
}
Despite utilizing the async keyword before the map function, I am observing undefined values being logged in the console. Can anyone shed light on why this is happening?
I have confirmed that the likedMovies[index] correctly displays the ids of the liked elements within the array, so there seems to be no issue there either. Should I consider using the .then() statement instead?
Furthermore, all types and API requirements have been validated. Everything appears to align accordingly. Your insights on this matter would be greatly appreciated, thank you.
LikedMovies represents an array of integers, and within this example, getMovieImages dynamically generates API requests based on these integers extracted from the likedMovies array. Despite the successful iteration through the indexes by the map function, getMovieImages fails to resolve, leading to undefined data being logged to the console.
While one possible approach could involve segregating the images field into separate objects for liked and non-liked movie images within the state object, I aim to avoid unnecessary repetition. Therefore, any alternative solutions would be highly valued. Thank you for your attention!