Как я могу использовать расширяемый реквизит для извлечения вложенного объекта в ReactJS?

Question

Итак, я пытаюсь динамически создавать страницы содержимого в React из файла json, который работает нормально, пока я не достигну вложенного объекта.

Это фрагмент одного из моих JSON объектов, хранящихся в моем JSON файле. Объект ссылки - это то, к чему у меня возникают проблемы с доступом. Я могу получить другие свойства совершенно нормально.

{
    "core-topics": [
        {
            "id": "coding",
            "name": "Coding",
            "headerColour": "blue",
            "description": "Learn how to build your very own website!",
            "image": "https://www.bitdegree.org/tutorials/wp-content/uploads/2018/08/what-is-a-web-developer.jpg",
            "link": [
                {
                    "id": "coding-item-one",
                    "name": "Java"
                },
                {
                    "id": "coding-item-two",
                    "name": "C++"
                },
                {
                    "id": "coding-item-three",
                    "name": "Python"
                }
            ]
        },

У меня есть компонент шаблона, который отображает все содержимое в HTML. Это всего лишь простой шаблонный компонент. Я попытался .map для свойства link, но так как ничего еще не было объявлено, я просто получил 'undefined or null property'. Логически я хочу сделать это в «Компоненте Writer», но не могу понять, как.

   render(){
    return(
        <Container>
            <HeaderImage headerImage = {this.props.image}>
                <ImageTextContainer>
                    <H1> {this.props.name} </H1>
                    <Stripe stripeColour = {this.props.headerColour}/>
                    <P> {this.props.description} </P>

                    {/* This is the nested object (I want to access the ID and name properties) */}
                    <p> {this.props.link}</p>

                </ImageTextContainer>
            </HeaderImage>
        </Container>
    )
}

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

const Writer = ({match: {url}, coreTopics}) => {
    return (
        <div>

           // This returns a page for each of the objects in my JSON file along with all the properties passed in from the template component
            <Route path = {`${url}/:topicId`} render = {
                ({ match }) => 
                <TopicHeaderCard {...coreTopics.find(topic => topic.id === match.params.topicId)}/>}
            />
        </div>
    )
}

Так есть ли способ получить доступ к объектам ссылки, используя этот метод? или есть другой метод, который был бы более подходящим для этого подхода?

Вся помощь очень ценится!

Answer 1

Вы можете проверить ссылку перед рендерингом, просто добавьте подтверждение !! this.props.link

 render(){
    return(
        <Container>
            <HeaderImage headerImage = {this.props.image}>
                <ImageTextContainer>
                    <H1> {this.props.name} </H1>
                    <Stripe stripeColour = {this.props.headerColour}/>
                    <P> {this.props.description} </P>

                    {/* This is the nested object (I want to access the ID and name properties) */}
                   {!!this.props.link && this.props.link.map((link)=>{
                    <div key={link.id}>    
                        <p>link.id</p>  
                        <p>link.name</p> 
                    </div>
                   })}

                </ImageTextContainer>
            </HeaderImage>
        </Container>
    )
}