FlatList：ListRenderItemInfo<> 的属性是什么？答案

【问题标题】：FlatList: What are the properties of ListRenderItemInfo<>?FlatList：ListRenderItemInfo<> 的属性是什么？
【发布时间】：2020-10-10 16:23:11
【问题描述】：

我正在尝试使用这样的 FlatList：

          <FlatList
          data={vehicles}
          horizontal={false}
          scrollEnabled
          renderItem={({ vehicle}) => <VehicleContainer vehicle={vehicle} />}
          keyExtractor={(vehicle: any) => vehicle.numberPlate.toString()}
        />

vehicles看起来像这样：

[{numberPlate: "OL-AL-1336", __typename: "Vehicle"}]

组件VehicleContainer看起来像这样：

type VehicleContainerProps = {
  vehicle: Vehicle;
};

export const VehicleContainer: React.FunctionComponent<VehicleContainerProps> = ({
  vehicle,
}) => {
  if (!vehicle) {
    return null;
  }
  return (
    <View style={styles.vehicleInfo}>
          <Text style={styles.numberPlate}>{vehicle.numberPlate}</Text>
    </View>
  );
};

但我在 renderItem 的车辆上不断收到错误消息，Property 'vehicle' does not exist on type 'ListRenderItemInfo<Vehicle>'ListRenderItemInfo 是什么？这不是我自己定义的。我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs typescript react-native react-native-flatlist

【解决方案1】：

renderItem 将对象作为参数，并且该对象包含：

{ 项目、索引、分隔符 }

这意味着在您的代码中您不能从中销毁车辆，而是将您的车辆表示为项目。

所以你必须这样写：

renderItem={({item}) => <VehicleContainer vehicle={item} />}

【讨论】：