Объект не отображается на экране - PullRequest
Новая
       5

Объект не отображается на экране

1 голос
/ 15 апреля 2020

У меня есть этот код, в котором я пытаюсь отобразить значение объекта, но этого не происходит. Однако в консоли я вижу ключ и его значение. Я не мог понять, в чем может быть причина, потому что я вижу значения и ключи. 


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;

1 Ответ

1 голос
/ 15 апреля 2020

Проблема в том, что вы используете .forEach() вместо .map() на Object.keys(props && props.categories). ForEach вернет undefined, таким образом, ничего не рендеринг, даже когда функция обратного вызова возвращает значение. Использование map вернет новый массив объектов, основанный на совокупных возвращаемых значениях из функции обратного вызова.

В качестве примечания побуждаю вас переместить логи c для проверки существования props.categories. , снаружи Object.keys (). 

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