javascript - 如何从 ReactJS 中的 JSON 对象访问嵌套数据？

Question

我正在尝试在 React 中映射大量数据，我已经取得了相当大的成功。现在我正在尝试从嵌套的 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"
                }
            ]
        },

我正在使用一种方法来访问此数据，该方法搜索特定的组件 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>
        )
    }
}

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

任何帮助都值得赞赏!我知道这是一篇相当大的帖子，可能包含太多信息，但我想不出其他方法可以将这一切传达给任何可能提供帮助的人。

Answer 1

在您的问题中，不清楚您在何处或如何传入列出的 JSON 对象。但举个例子，如果我有这个对象，并且想编写一个返回匹配主题的函数......我会写这样的东西:

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