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} />}

FlatList：ListRenderItemInfo<>有哪些属性？

FlatList: What are the properties of ListRenderItemInfo<>?

javascript

typescript

reactjs

react-native

react-native-flatlist