反应本机中未处理的承诺拒绝

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[0] 上的属性之前，还应检查以确保gridData不为空。

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。