如何使用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>
    );
}

让我知道这是否不能解决您的问题。