React组件传参报错：Property map does not exist 求助

问题根源 #

• 你误将整个props对象当作数组调用map方法，props是包含属性的对象，本身没有map方法，必须提取其中的数组属性才能遍历。
• 父组件传参的属性名与子组件接口定义不匹配：父组件传的是cd={cars}，但子组件接口声明的是cars，导致子组件无法正确获取到数组数据。

修正后的父组件代码 #

function HomePage() {
  return (
    <React.StrictMode>
      {/* 将属性名改为cars，与子组件接口保持一致 */}
      <VolvoCarsProducstListPage cars={cars} />
    </React.StrictMode>
  );
}

export default HomePage;

修正后的子组件代码 #

import React 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) => {
  // 提取props中的cars数组，而非直接使用整个props对象
  const carsJSONData = props.cars;
  // 用可选链?.做空值保护，避免数组未传入时报错
  const carItems = carsJSONData?.map(car => (
    <div key={car.id} className="car-item">
      <h3>{car.modelName}</h3>
      <p>车身类型：{car.bodyType}</p>
      <img src={car.imageUrl} alt={car.modelName} />
    </div>
  ));

  console.log(carsJSONData);

  return (
    <div className="volvo-product-list-page">
      {carItems}
    </div>
  );
};

另外，建议在调用map前使用可选链?.做空值校验，防止cars未传入或为undefined时触发报错。

内容的提问来源于stack exchange，提问作者EmbeddedOS