Javascript 对象未在屏幕上渲染

我有这段代码，我试图呈现一个对象的值，但它没有发生。然而，在控制台中，我可以看到一个键及其值。我无法找出原因，因为我可以看到值和键

export const MarketPlaceOptions = (props) => {

    return (

        <Wrapper hideMarginBottom={props.forCreditSuggestion}>
            {
              Object.keys(props && props.categories).forEach(function(key) {
                  return(
                <Tile onClick={() => props.onClickOptionTile(key)}>
                    <Image src={Wellness} height={'34px}'}  width={'36px'}/>
                    <h1>{props && props.categories[key]}</h1>
                    <Ptag   textAlign='center'>

                        {props && props.categories[key]}
                    </Ptag>
                </Tile>
                  )
            })

            }
        </Wrapper>
    )
}

const Wrapper = styled.div`
    display: flex;
    overflow-x: auto;
    -webkit-scrollbar { display: none;}
`;

export default MarketPlaceOptions;

导出常量MarketPlaceOptions=（道具）=>{
返回(
{
Object.key（props&&props.categories）.forEach（function（key）{
返回(
props.onClickOptionFile（键）}>
{props&&props.categories[key]}
{props&&props.categories[key]}
)
})
}
)
}
const Wrapper=styled.div`
显示器：flex；
溢出-x：自动；
-webkit滚动条{显示：无；}
`;
出口默认市场期权；

问题是您在

对象.keys（props和&props.categories）

上运行的是

.forEach（）

而不是

.map（）

。ForEach将返回undefined，因此不呈现任何内容，即使回调函数返回值也是如此。使用map将根据回调函数的累积返回值返回一个新的对象数组

作为旁注，我鼓励您将检查props.categories是否存在的逻辑移到Object.keys（）的外部

{ props && props.categories && Object.keys(props.categories).map(
   ...
}