In FeedScreen, I try to get "userData" from redux store and feed it into a Flatlist. But nothing is shown. I check console.log with Chrom dev tool, I can see the element in "userData" but .length is zero and "userData[0]" is undefined.
If I refreshed the app with expo, the flatlist is shown.
I think it is related to timing as "userData" is fetched from firebase store and FeedScreen is nested in MainScreen Tab Navigator.
How to fix it?
the code shown below is extracted only from the relevant section, and I log the redux store in MainScreen.js. The redux reducer is working as expected.
FeedScreen.js
export default function FeedScreen(props,{ navigation }) {
const [useData2, setUserData2] = useState({});
const userData = useSelector(state=> state.userState.userdata)
console.log(userData)
console.log(userData.length)
}
MainSceen.js
....
let tempPostArr2=[];
let subUserPost = followingList.map(uid => {
const q = query(collection(db, "post", uid, "userPosts"), orderBy("timestamp", "asc"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
let tempPosts = querySnapshot.docs.map((doc) => {
const data = doc.data();
const postId = doc.id;
return { postId, ...data, uid }
})
tempPostArr2.push(tempPosts)
})
})
dispatch(fetchAllUsersPost(tempPostArr2))
return (
<Tab.Navigator initialRouteName='Feed' labeled={false}>
<Tab.Screen name="Feed" component={FeedScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}} />
</Tab.Navigator>
)
Minor point about console.log: if you feed it an object directly like you've done, it tends to be "live" if you try to open it to look at object contents. So if you want to truly know what the object was at the time of logging, console.log(JSON.stringify(x)) is necessary.