尝试迭代道具数据时属性映射不存在

Question

我正在尝试迭代我作为道具发送的 JSON 数据集。我尝试打印道具，我看到数据在那里。但是我似乎无法使用 .map，因为它声明它不是道具数据的属性。

父组件：

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>

);

};

Answer 1

看起来你正试图在包含汽车的对象上调用

.map

，而不是包含汽车的数组。如果你改变这两行它应该工作

    const carsJSONData = props;
    carsJSONData.map()

到

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

Answer 2

属性映射不存在，因为

carsJSONData

不是数组，它是组件收到的

props

，后者是

CarDataProps

类型，它是一个包含数组的对象，因此您无法通过它进行映射。
但是，如果您希望

carsJSONData.cars

成为接收到的道具的属性

carsJSONData = props.cars

，它是一个数组