时间戳

首页 > 解决方案 > 对象未在屏幕上呈现

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;

标签： javascriptreactjsreact-props

解决方案

问题是您正在运行.forEach()而不是.map()on Object.keys(props && props.categories)。ForEach 将返回 undefined，因此即使回调函数返回一个值，也不会渲染任何内容。使用 map 将根据回调函数的累积返回值返回一个新的对象数组。

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

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

推荐阅读