FlatList：ListRenderItemInfo<> 的属性是啥？

Posted 2023-03-13

技术标签:

【中文标题】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 是什么？这不是我自己定义的。我该如何解决这个问题？

【问题讨论】：

【参考方案1】：

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

项目、索引、分隔符

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

所以你必须这样写：