FlatList：ListRenderItemInfo<>有哪些属性？

Question

我正在尝试使用这样的 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？这不是我自己定义的。我怎样才能解决这个问题？

Answer 1

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

{ 项目、索引、分隔符 }

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

所以你必须这样写：

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