typescript 尝试迭代属性数据时属性Map不存在

3npbholx  于 2023-03-19  发布在  TypeScript
关注(0)|答案(2)|浏览(227)

我正在尝试迭代一个JSON数据集,并将其作为prop发送。我尝试打印prop,并看到数据在那里。但是,我似乎无法使用.map,因为它声明它不是prop数据的属性。
父组件:

function HomePage() {

return (
   <React.StrictMode>
     <VolvoCarsProducstListPage cd={cars} />
   </React.StrictMode>
 );
}

export default HomePage;

子组件:

import React, { useState } from 'react';

export interface CarDataProps {
cars: Car[];
};

export interface Car {
 id: string,
 modelName: string,
 bodyType: string,
 modelType: string,
 imageUrl: string
}

export const VolvoCarsProducstListPage = (props: CarDataProps) => {

    const carsJSONData = props;
    carsJSONData.map()
    console.log(carsJSONData);

return (
    <div className="volvo-product-list-page">
    </div>

);

};

wz1wpwve

wz1wpwve1#

属性Map不存在,因为carsJSONData不是数组,它是组件接收的props,后者的类型为CarDataProps,它是包含数组的对象,因此无法通过它进行Map。
但是,如果您希望carsJSONData成为接收到的props的属性cars(一个数组),则可以通过carsJSONData.cars进行Map,或者简单地改为carsJSONData = props.cars,并通过以下方式将props传递给组件:

<VolvoCarsProducstListPage cars={cars} />

以避免任何冲突

qnakjoqk

qnakjoqk2#

看起来您试图在包含汽车的对象上调用.map,而不是在包含汽车的数组上。如果您更改这两行,它应该可以工作

const carsJSONData = props;
    carsJSONData.map()

const carsJSONData = props.cars;
    carsJSONData.map(x => x)

相关问题