timing issue, console.log show Array element but length is zero-CodePudding

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>
  )

CodePudding user response：

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.

CodePudding user response：

I found the answer, onSnapshot provides a callbackfunction. The dispatcher runs before the callback function runs. I make a state change in the callback function and use useEffect to relaunch the dispatcher.

reference