React/Typescript 属性“data”在类型“IntrinsicAttributes & [Interface]”上不存在

Question

我创建了一个组件，我在其中访问本地 json 文件并将对象数组传递给另一个组件。

第一个组件的代码片段 -

导入语句 - import TvData from './Data/TVData.json';

对于第二个组件，我像这样传递数据，我收到此行的错误消息

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

第二个组件的代码片段 -

在这里我定义了这样的接口，

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

以及带有这样参数的功能组件，

function SecondComponent(data: dataProps)

我在其中通过 json 文件中的对象数组进行映射

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

我是 Typescript 的 React 新手，因此我们将不胜感激。

Answer 1

component 道具必须是 object，而不是数组。 尝试将数组放在其中一个输入道具中，如下所示：

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