React组件可打印props对象但无法访问其属性，求原因

问题描述 #

我能打印React组件的props对象，但无法访问它的属性，恳请帮忙解释原因。

父组件代码 #

function createCarBlocks(){
    return carsJSONData.map((car) => {
        console.log(car);
        return <CarBlock carBlockItem={car}/>
    })
};

子组件代码 #

类型定义 #

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

组件实现 #

const CarBlock = (props: CarBlockItemProps) => {
    console.log("This is me printing props", props);
    console.log("This is me trying to access its value", props.bodyType); // 注意我不能写props.carBlockItem

    return (
        <p>test</p>
    );
};

export default CarBlock;

控制台输出 #

原因分析 #

• 父组件传递props时，是将car对象包裹在carBlockItem属性中传递的，因此子组件实际收到的props结构是{ carBlockItem: car对象 }
• 但你定义的CarBlockItemProps接口，是直接声明接收car对象的各个属性（如bodyType），这和实际传递的props结构完全不匹配
• 所以打印props时能看到carBlockItem这个嵌套对象，但直接访问props.bodyType会返回undefined——因为这个属性根本不在顶层props里，而是在props.carBlockItem内部

解决方案 #

方案一：修改父组件，直接展开传递属性 #

如果希望子组件能直接访问props.bodyType，可以在父组件中用扩展运算符展开car对象的所有属性：

function createCarBlocks(){
    return carsJSONData.map((car) => {
        console.log(car);
        return <CarBlock {...car}/>
    })
};

这样传递的props结构就和CarBlockItemProps接口定义一致，子组件就能正常访问props.bodyType。

方案二：修改子组件，匹配实际props结构 #

如果要保留父组件的传递方式，需要修改子组件的类型定义和属性访问逻辑：

修正类型接口

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

修正组件内的属性访问

const CarBlock = (props: CarBlockProps) => {
    console.log("This is me printing props", props);
    console.log("This is me trying to access its value", props.carBlockItem.bodyType);

    return (
        <p>test</p>
    );
};

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