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

如果这不能解决您的问题，请告诉我。

如何使用map方法在React native中访问嵌套的JSON对象？

1 个答案: