如何從 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>
  )
}