I've been facing a challenge while developing an app in React Native. The issue lies in understanding how to manage state in functional components.
After successfully fetching and storing an array of activities in the component's state, I encountered difficulties when trying to make additional fetches related to these activities. Specifically, I needed to access each activity's ID from the state, but all I saw in the console log was an empty array.
Despite confirming that everything was executing in the correct order by analyzing the timestamps, I couldn't figure out why I couldn't access the state in this particular scenario. In other parts of the code, accessing the state and retrieving the full array of activities worked perfectly fine. So, what could be causing the issue here?
Below is the snippet of code:
const [activities, setActivities] = useState([]);
async function getActivites(cred){
const zeroLevel = Date.now();
fetch(`https://www.strava.com/api/v3/athlete/activities?access_token=${cred.access_token}`)
.then((res) => res.json())
.then((data) => {
for (const element of data) {
setActivities(oldActivities => [... oldActivities, element])
console.log(Date.now() - zeroLevel)
}
console.log('for-loop finished', Date.now() - zeroLevel)
})
.then(() => console.log(Date.now() - zeroLevel))
.then(() => console.log(activities))
}
I attempted to store the array in another object as a workaround, but I am convinced there must be a simpler solution.