reactjs - React/Typescript Egenskab 'data' findes ikke på typen 'IntrinsicAttributes & [Interface]'

Jeg har oprettet en komponent, hvor jeg får adgang til en lokal json-fil og sender arrayet af objekter til en anden komponent.

Kodeudsnit til første komponent -

import erklæring - import TvData fra './Data/TVData.json';

for den anden komponent sender jeg dataene sådan her, jeg får Fejl for denne linje, som siger

Type '{ data: { id: number; name: string; price: number; imageUrl: string; }[]; }' is not assignable to type 'IntrinsicAttributes & dataProps'.
  Property 'data' does not exist on type 'IntrinsicAttributes & dataProps'.

 <SecondComponent data={TvData} />

Kodeuddrag for den anden komponent -

her definerede jeg interface på denne måde,

interface dataProp {
    id: number;
    name: string;
    price : number;
    imageUrl : string;
}
type dataProps = dataProp[];

og den funktionelle komponent med parametre som sådan,

function SecondComponent(data: dataProps)

indenfor hvilket jeg kortlægger gennem arrayet af objekter fra json-filen

{
  data.map((item : dataProp) =>
   {
    return (
     <Item key={item.id}>
        {item.name}
      </Item>
           )
    }
  )}

Jeg er ny til React med Typescript, så enhver form for hjælp ville blive værdsat.

Svar #1

komponentens props skal være et objekt, ikke et array. Prøv at placere arrayet inden i en af input-propsene, sådan her:

interface Item {
    id: number;
    name: string;
    price : number;
    imageUrl : string;
}
type Props = { data: Item[] };

...

function SecondComponent(props: Props) {
  return props.data.map(item => (
     <Item key={item.id}>
        {item.name}
      </Item>
    ));
}

Relaterede artikler