在 react.js 中使用 API 时，如何使一个使用效果先于另一个使用效果运行

Question

The purpose of this project is to dynamically get the coordinates and bounds from a map API and use its values to get the data of places attached to that area

The situation I have is that on my app.js I have two use effects:

• the first is to get the user's location after the window is loaded this makes it possible for the map API to work.

• the second is to get the data from a different API based on the bounds gotten from the map.

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

Answer 1

It would be better if you could chain these operations instead of two disconnected useEffect s. Try calling the getPlacesData function where you're now changing the state using setCoordinates , inside the first useEffect .

I would also recommend extracting this out into a custom hook to make the code cleaner.

As a side note, you might not actually need window.addEventListener since this component will already have mounted when the first useEffect is triggered.