CODEWITHSUNDEEP
javascriptreact-native
nadeshoki
nadeshoki

Reputation: 371

Unhandled promise rejection in react native

I have a warning of unhandled promise rejection and undefined is not an object evaluating to this.state.gridData[0].brand

there is something wrong with this part of the code 

async componentDidMount() {
       const bikes = await fetchVehicleBasedOnType(VEHICLE_TYPES.TWO_WHEELER);
       this.setState({ bikes });
       const gridData = _.uniqBy(bikes, 'brand').map((K) => {
                return { brand: K.brand, logo: K.brand_logo };
                              });
       this.setState({ gridData,
                       selectedBikeBrand: this.state.gridData[0].brand,
                       selectedBikeBrandLogo: this.state.gridData[0].logo,
                       loading: false
                      });
        const listData = bikes
        .filter(item => item.brand === this.selectedBrand)
        .map(({ model, image }) => ({ model, modellogo: image }));
        this.setState({ listData });
  }

can someone suggests the edits and fixes to make this code better..

Upvotes: 0

Views: 355

Answers (2)

JLRishe
JLRishe

Reputation: 101680

You're not assigning gridData to this.state, so presumably this.state.gridData is undefined. Just remove the usage of this.state. You should also check to make sure that gridData isn't empty before trying to access properties on gridData[0].

const gridData = _.uniqBy(bikes, 'brand').map((K) => {
    return { brand: K.brand, logo: K.brand_logo };
});

const firstItem = gridData[0] || { };

this.setState({ 
    gridData,
    selectedBikeBrand: firstItem.brand,
    selectedBikeBrandLogo: firstItem.logo,
    loading: false
});

Upvotes: 1

Raj
Raj

Reputation: 87

You have girdData[0].brand when you are setting the state.

Upvotes: 0

Related Questions