CODEWITHSUNDEEP
reactjs
Jim from Princeton
Jim from Princeton

Reputation: 741

Async .map() not working within React hook

I cannot understand why the .map() function is somehow not being called in this function. I'm trying to call my API asynchronously within the componentDidMount() hook, but it seems that the array method never gets called.

async componentDidMount() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(`Returned: ${data.zipCodes.length} results`);
    console.log(data.zipCodes[0]);
    const geoPoints = data.zipCodes;
    geoPoints
      .filter(geoPoint => geoPoint.Recipient_Postal_Code !== "")
      .map(function (geoPoint) {
        const location = zipToLocation.find(element => element.fields.zip === geoPoint.Recipient_Postal_Code);
        if (!location){
          return;
        }
        if(!location.hasOwnProperty('fields')) {
          return;
        }
        const lat = location.fields.latitude;
        const lng = location.fields.longitude;
        const result = {
          lat: lat,
          lng: lng,
          trackingNumber: geoPoint.Shipment_Tracking_Number
        }
        console.log(result); //OK!
        return result;
      });
    console.log(`Mapped ${geoPoints.length} geoPoints`);
    console.log(geoPoints);  //same data as data.zipCodes ??
    this.setState({data: geoPoints}) 
  } catch(error) {
    console.log(error);
  }
}

Is is somehow being disrupted by React?

Upvotes: 0

Views: 39

Answers (1)

Luke Storry
Luke Storry

Reputation: 6702

.map doesn't edit the input array, it returns a new array that is created from the old one.

You want to put:

const geoPoints = data.zipCodes
                      .filter(...)
                      .map(...);

Upvotes: 1

Related Questions