CODEWITHSUNDEEP
javascriptreactjs
Noble Polygon
Noble Polygon

Reputation: 806

Passing external data into components

In my react app, I am currently passing a list of stores by calling the API directly from the URL.

   const getStore = async () => {
    try {
      const response = axios.get(
        'http://localhost:3001/appointment-setup/storeList'
      );
      return response;
    } catch (err) {
      console.error(err);
      return false;
    }
  };

I pass this function into my useEffect hook where I would set my get a list of stores using resp.data.stores:


 const [storeLocations, setStoreLocations] = useState([]);

  useEffect(() => {
    async function getData(data) {
      await service.stepLocation.init();
      const resp = await getStore();
      setStoreLocations(resp.data.stores);
    }
    setFlagRender(true);
    return getData();
  }, []);

This works, however, I noted in useEffect there is a call await service.stepLocation.init(). There is a file that already takes care of all the backend/data for the component.

const stepLocation = {

// removed code

  // method to retrieve store list
  retrieveStoreList: async function ()
    let response = await axios.get(
      constants.baseUrl + '/appointment-setup/storeList'
    );
    return response.data.stores;
,

// removed code

Since this data is available, I don't need the getStore function. However when I try to replace response.data.stores in useEffect with service.stepLocation.retrieveStoreList no data is returned. How do I correctly pass the data from this file in my useEffect hook?

Upvotes: 0

Views: 46

Answers (1)

jaybhatt
jaybhatt

Reputation: 547

I think your useEffect should be like follows as you want to save the stores in your state.

useEffect(() => {
  const updateStoreLocations = async () => {
    const storeLocations = await service.stepLocation.retrieveStoreList();
    setStoreLocations(storeLocations); 
  }
  updateStoreLocations();
}, [])

Upvotes: 1

Related Questions