如何使用map方法在React Native中訪問嵌套的JSON對象？

Question

我想列出卡內的JSON對象。 以下是我的JSON數據。

[
   {
      "data":{
         "name":"Economy",
         "categories":[
            {
               "id":28,
               "name":"Economy",
               "slug":"economy",
               "image":"https://asdfghh/gjnk/User-default-image-boy.png"
            }
         ],
         "instructor":{
            "id":"24",
            "name":"asdfg",
            "avatar":"https://asdfgh/fghj/User-default-image-boy.png",
            "sub":""
         },
         "menu_order":0
      },
      "headers":[

      ],
      "status":200
   },
   {
      "data":{
         "name":"MCQ",
         "categories":[

         ],
         "instructor":{
            "id":"1",
            "name":"qwertyy",
            "avatar":"https://asdfgh//bpthumb.jpg",
            "sub":""
         },
         "menu_order":0
      },
      "headers":[

      ],
      "status":200
   }
]

如何在此JSON對象上映射？ 我想在卡中列出data.categories.name ， data.instructor.name ，在React中的渲染如下：

renderCourses (){
        return this.state.courses.map(course =>
        <HomeScreen key={course.categories.name} course={course}/>)
    render(){
        console.log(this.state);
        return(

        <ScrollView>
        {this.renderCourses()}
        </ScrollView>
        );
    }
}

但是卡內沒有任何顯示。 我怎樣才能做到這一點？

Answer 1

根據您的課程JSON數據，其中的類別是對象數組，因此您不能直接使用course.categories.name 。 在您的渲染器內部嘗試並按以下方式打印：

renderCourses = () => {
    return (<div>
        {this.state.courses.map((course, index)=> <HomeScreen key={course.categories[0].name || index} course={course}/>)}
    </div>)
}

render(){
    console.log(this.state);
    return(
        <ScrollView>
            {this.renderCourses()}
        </ScrollView>
    );
}

讓我知道這是否不能解決您的問題。