如何从 ReactJS 中的 JSON object 访问嵌套数据？

Question

我正在尝试 map React 中的大量数据，我已经取得了相当大的成功。 现在我正在尝试从嵌套的 JSON object 中检索数据，但我不知道该怎么做。 我的 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"
                }
            ]
        },

我正在使用一种搜索特定组件 id 然后返回匹配数据的方法来访问这些数据。

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>
        )
    }
}

每次我尝试访问链接 object 中的属性时，我都会收到一条错误消息，指出 map function 不能用于未定义。 从这个 object 中获取任何数据基本上是不可能的，我不知道为什么。 除了任何嵌套对象之外，我可以轻松访问所有数据。

任何帮助都将不胜感激。 我知道这是一篇相当大的帖子，可能包含太多信息，但我想不出另一种方法来将这一切传达给任何可能提供帮助的人。

Answer 1

在您的问题中，尚不清楚您在哪里或如何传递您列出的 JSON object。 但是举个例子，如果我有这个 object，并且想写一个 function 来返回一个匹配的主题......我会写这样的东西：

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 object 中提取数据？

Answer 2

更新 Card 组件以使用 prop key 获取数据，不要传播它。

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>
      )
  }
}

使用 key(prop) 传递数据

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>
  )
}