getDataPlaces() function not responding and can a useEffect() be nested?

[Faithesther20]

 const App =() => {
        const [places, setPlaces]= useState([]);
        const [coordinates, setCoordinates] = useState({lat: 0, lng: 0});
        const [bounds, setBounds]= useState(null);  
         
        useEffect(()=>{
            let mounted = true;
            window.addEventListener('load', (event) => { 
            navigator.geolocation.getCurrentPosition(({ coords: {latitude, longitude} }) => {
                if (mounted){
                setCoordinates({ lat: latitude, lng: longitude });
                }
            },(err)=> {
                console.warn(`ERROR(${err.code}): ${err.message}`);
              },{maximumAge:60000, timeout:5000, enableHighAccuracy:true});
              console.log('page is fully loaded');
            });
            return ()=>{
                mounted = false;
            }
        }, []);
    
        useEffect(() => {
           
            console.log(coordinates, bounds); 
            let isApiSuscribed= true;
            getPlacesData(bounds.sw, bounds.ne)//I am trying to get the API data using this
             .then((data) => {
                 
                 if (isApiSuscribed){
                 console.log(data);
    
                 setPlaces(data);
                 }
             });
             return ()=>{
                 isApiSuscribed=false;
             }
        }, [coordinates,bounds]);
        
        return(
            <>
                <CssBaseline />
                <Header />
                <Grid container spacing={3} style={{width:'100%'}}>
                    <Grid item xs={12} md={4}>
                        <List places={places}/>
                    </Grid>
                    <Grid item xs={12} md={8}>
                        <Map
                            setCoordinates={setCoordinates}
                            setBounds = {setBounds}
                            coordinates ={coordinates}
                        />
                    </Grid>
                </Grid>
            </>
        )
    }
    export default App;

The Challenge is that if I do not call the bounds.sw, bounds.ne parameters in the getPlacesData() function my Locally hosted page would run showing the appropriate Map and other components but the data that I need to fetch from the other API would not work.

And when I then call the bounds.sw, bounds.ne parameters in the getPlacesData() function like this getPlacesData(bounds.sw, bounds.ne) then nothing is rendered on the screen and I get the following error codes: Error Message

this is the code for the API that is to return the data back

import axios from 'axios';

const URL ='https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary';



export const getPlacesData = async (sw, ne) => {
  try {
    const { data: { data } } = await axios.get(URL, {
      params: {
        bl_latitude: sw.lat,
        bl_longitude: sw.lng,
        tr_longitude: ne.lng,
        tr_latitude: ne.lat,
      },
      headers: {
        'x-rapidapi-key': process.env.REACT_APP_RAPID_API_TRAVEL_API_KEY,
        'x-rapidapi-host': 'travel-advisor.p.rapidapi.com',
      },
    });

    return data;
  } catch (error) {
    console.log(error);
  }
};

Please what do I do?

[kiritocode1]

i have the same problem , please update me if you find something

[Faithesther20]

No problem, but so far included the if bounds condition, and the was a little improvement. I would inform you if I have any other solution.

Best regards.

On Thu, May 5, 2022, 07:24 kirito @.***> wrote:

i have the same problem , please update me if you find something

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_travel_advisor/issues/28#issuecomment-1118215493, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASN7SESQK2FVHKNGSVXBZ3TVINSTDANCNFSM5VAYBDWA . You are receiving this because you authored the thread.Message ID: @.***>

[Faithesther20]

Okay, so I was able to solve the problem, adding the if conditional statement before the getPlaces() function and trying to check if the API key you Inputted is correct. My own problem also was that my API key was incomplete.

On Fri, May 6, 2022 at 3:35 PM esther iyege @.***> wrote:

On Fri, May 6, 2022, 15:33 esther iyege @.***> wrote:

No problem, but so far I included the if bounds condition, and there was a little improvement. I would inform you if I have any other solution.

Best regards.

On Thu, May 5, 2022, 07:24 kirito @.***> wrote:

i have the same problem , please update me if you find something

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_travel_advisor/issues/28#issuecomment-1118215493, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASN7SESQK2FVHKNGSVXBZ3TVINSTDANCNFSM5VAYBDWA . You are receiving this because you authored the thread.Message ID: @.***>

[adrian-slowinski]

https://stackoverflow.com/questions/69055003/typeerror-cannot-read-properties-of-null-reading-sw-using-google-maps-api-a

getPlacesData(bounds?.sw, bounds?.ne).then((data)

[dnsamw]

I encountered the same problem , i'm still at 1:06:47 of the youtube video. I conditionally called the api. it seems to be working. we'll see how it goes.

useEffect(() => { if (bounds != null) { getPlacesData(bounds?.sw, bounds?.ne).then((data) => { setPlaces(data); }); } }, [coordinates, bounds] );