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