javascript - FlatList: Hva er egenskapene til ListRenderItemInfo<>?

Jeg prøver å bruke en FlatList slik:

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

hvor vehicles ser slik ut:

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

og komponenten VehicleContainer ser slik ut:

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>
  );
};

Men jeg får hele tiden en feil på renderItem's vehicle som Property 'vehicle' does not exist on type 'ListRenderItemInfo<Vehicle>' Hva er ListRenderItemInfo? Det er ikke noe jeg har definert selv. Hvordan kan jeg fikse dette?

Svar #1

renderItem tar et objekt som argument, og det objektet inneholder:

{ element, indeks, skilletegn }

som betyr at i koden din kan du ikke demontere kjøretøyet fra det, men i stedet er kjøretøyet ditt representert som en gjenstand.

så du må skrive det slik:

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

Relaterte artikler