反应原生的未处理承诺拒绝

Question

我发出未处理承诺拒绝的警告，undefined不是评估this.state.gridData [0] .brand

的对象

这部分代码有问题

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 });
  }

有人可以建议编辑和修复以使这些代码更好......

Answer 1

您没有将gridData分配给this.state，因此大概this.state.gridData为undefined。只需删除this.state的使用情况即可。 在尝试访问gridData上的媒体资源之前，您还应该检查以确保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
});

Answer 2

当你设置状态时，你有girdData [0] .brand。