Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Promise is not resolving in useEffect hook

$
0
0

I am getting response from api which i need to render.

following is the sample response (relevant fields only):

 [    {        ...other fields,"latitude": "33.5682166","longitude": "73.207334",    },    {       ...otherfields,"latitude": "33.5602917176197","longitude": "73.22683267327477",    }]

i need to render the following component using above response (relevant code only):

import { getReverseGeocodedLocation } from "../../../services/getLocation";import { useEffect, useState,memo } from "react"; type Props = {  category_id: number;  id: number;  title: string;  price: string;  lat: string;  lng: string;  category: string;  source: ImageSourcePropType;};const RecentPost: React.FC<Props> = (props) => {...otherCode,  useEffect(() => {    (async () => {      //This promise below is not resolving for first few entries of api res      //For later entries in the array from api res, it resolves.      // if only single entry is sent from api then it resolves successfully      const address = await getReverseGeocodedLocation(        parseFloat(props.lat),        parseFloat(props.lng)      );      address.description && setDescription(address.description);    })();  }, []);  return (        ...allTheComponentsBasedOnApiResponse,  );};export default memo(RecentPost, () => true);

Following is the parent component which renders above component:

import { useEffect, useState } from "react";import RecentPost from "./RecentPost";const RecentPosts: React.FC = () => {  const [recent_posts, set_recent_posts] = useState<rent_post_brief[]>([]);  const [posts_loading, set_posts_loading] = useState(true);  const city_name = useAppSelector((state) => state.location.city_name);...otherStuff,  useEffect(() => {    (async () => {      try {        set_posts_loading(true);        const res = await rentApi.get<rent_post_brief[]>(`/rent/recent-posts`, {          params: {            city: city_name === "All cities" ? undefined : city_name,            filter,          },        });        set_recent_posts(res.data);      } finally {        set_posts_loading(false);      }    })();  }, [city_name, filter]);  return (<>      ...otherStuff,        {posts_loading ? (<LoadingText />        ) : recent_posts.length > 0 ? (          recent_posts.map((item) => {            return (<RecentPost                id={item.id}                category_id={item.category.id}                key={`${item.id}`}                source={{ uri: item.uploaded_media[0].file }}                title={item.title}                price={item.price}                lat={item.latitude}                lng={item.longitude}                category={item.category.title}              />            );          })        ) : (<NoPosts />        )}</View>     ...otherStuff,</>  );};export const NoPosts: React.FC = () => (<Animated.Text style={styles.no_posts} entering={FadeIn} exiting={FadeOut}>    No posts for current settings, kindly either change city or change filter.</Animated.Text>);export default RecentPosts;

Following is the function which returns the promise:

import * as Location from "expo-location";/** * Takes location coordiantes and returns string location * @param latitude * @param longitude * @returns Promise resolving to string location */export const getReverseGeocodedLocation = async (  latitude: number,  longitude: number) => {  const reverse_geocoded_results = await Location.reverseGeocodeAsync({    latitude,    longitude,  });  const result = reverse_geocoded_results[0];  const { city, district } = result;  return { city, description: district };};

Viewing all articles
Browse latest Browse all 6287

Trending Articles