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

Question

Я пытаюсь отобразить большой объем данных в React, с которыми Iv'e добился приличного успеха. Сейчас я пытаюсь получить данные из вложенного объекта 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"
                }
            ]
        },

Я получаю доступ к этим данным с помощью метода, который ищет указанный идентификатор компонента c и затем возвращает соответствующие данные.

const Writer = ({match: {url}, coreTopics}) => {
    return (
        <React.Fragment>
            /* This renders each link from the JSON file */
            /* And maps it onto the card layout component below */
            <Route path = {`${url}/:topicId`} render = {
                /* searches for a matching id and renders all properties if it finds a match */
                ({ match }) => 
                <card {...coreTopics.find(topic => topic.id === match.params.topicId)}/>}/>
        </React.Fragment>
    )
}

При использовании компонента шаблона для рендеринга всех данных JSON в формате HTML.

class card extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            links: {}
        }
    }
    render(){
        return(
            <Container>
                <HeaderImage headerImage = {this.props.image}>
                    <ImageTextContainer>
                        <H1> {this.props.name} </H1>
                        <Stripe stripeColour = {this.props.headerColour}/>
                        <P> {this.props.description} </P>
                    </ImageTextContainer>


                    /* What I'm attempting to do with 0 luck. */
                    /* I am also aware the code isn't correct, i'm just demonstrating my logic behind this. */

                    <ul> 
                      {this.props.link.map((name, id)) => 
                          <li id = {link.id}> {link.name} </li>
                       })
                    </ul>
                </HeaderImage>
            </Container>
        )
    }
}

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

Любая помощь приветствуется! Я понимаю, что это довольно большой пост и, вероятно, содержит слишком много информации, но я не мог придумать другого способа донести это до любого, кто мог бы помочь.

Answer 1

Обновите компонент Card, чтобы получать данные с помощью ключа prop, не распространяйте их.

class Card extends React.Component {
  constructor(props){
      super(props);
      this.state = {
          links: {}
      }
  }
  render(){
    const card = this.props.card || {link: []}
      return(
          <Container>
              <HeaderImage headerImage = {card.image}>
                  <ImageTextContainer>
                      <H1> {card.name} </H1>
                      <Stripe stripeColour = {card.headerColour}/>
                      <P> {card.description} </P>
                  </ImageTextContainer>
              </HeaderImage>
          </Container>
      )
  }
}

Передача данных с помощью ключа (проп)

const Writer = ({match: {url}, coreTopics}) => {
  const card = coreTopics.find(topic => topic.id === match.params.topicId)
  return (
      <React.Fragment>
          <Route path = {`${url}/:topicId`} render = {
              ({ match }) => 
              <card card={card}/>}/>
      </React.Fragment>
  )
}

Answer 2

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

const coreTopicsJson = {
  "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"
              }
          ]
      }
  ]
}

const findTopicById = (topicId, coreTopicsJson) => (
  coreTopicsJson["core-topics"].find(({id}) => id === topicId)
)

const codingCoreTopic = findTopicById("coding", coreTopicsJson) // returns object of topic with id of 'coding'

Возможно, это может помочь как вытащить данные из JSON объекта?