我正在尝试迭代一个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>
);
};
2条答案
按热度按时间wz1wpwve1#
属性Map不存在,因为
carsJSONData
不是数组,它是组件接收的props
,后者的类型为CarDataProps
,它是包含数组的对象,因此无法通过它进行Map。但是,如果您希望
carsJSONData
成为接收到的props的属性cars
(一个数组),则可以通过carsJSONData.cars
进行Map,或者简单地改为carsJSONData = props.cars
,并通过以下方式将props传递给组件:以避免任何冲突
qnakjoqk2#
看起来您试图在包含汽车的对象上调用
.map
,而不是在包含汽车的数组上。如果您更改这两行,它应该可以工作到