文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在FlatList中没有在ReactNative中显示来自自定义Api的嵌套Json数据

问在FlatList中没有在ReactNative中显示来自自定义Api的嵌套Json数据
EN

Stack Overflow用户
提问于 2021-08-14 13:58:43
回答 2查看 146关注 0票数 0

我多次尝试获取数据，但它没有显示应用程序中的任何内容，以下是获取Api数据的代码库。这是控制台日志记录。

  1. 数据是在metro

中的控制台日志记录

  1. ，但当试图在平面列表中呈现时，它没有显示任何内容，而是显示了一个空白页。

  1. 数据是一个嵌套的对象。

从“react”导入React，{useEffect，useState}；从“react本机”导入{FlatList、SafeAreaView、Text、View}；导出默认的FoodProductsApi = () => { const data，setData = useState([])；const getFoodApi = () => {=>( 'url'，{方法：'POST'，标题：{ Accept：'application/json'，‘Content’：'application/json'，}，JSON.stringify({ countryName：'India'，deliveryPincode：'5600100'，categoryType：'Food'，})，}，) .then(response => response.json()) .then(json => { setData(json.foodProducts)；console.log(json.foodProducts.categories)；}) .catch(错误=> {console.error(错误)；})；}；useEffect(() => { getFoodApi ()；}，[])；const keyExtractor =() =>项=> item.id；返回(名称 ( {index.data.foodProducts.map((i，v) => { {i.categoryName}；})} /> )；}；};

，这是json数据

代码语言：javascript
复制
{
"responseCode": "200",
"responseMessage": "Successfull",
"foodProducts": {
    "hubId": "610299e303be56ca3924971e",
    "categories": [
        {
            "id": "61028aff294f460012c9101e",
            "categoryName": "Kalyani Biryani",
            "rankOrder": 6,
            "status": "ACTIVE",
            "createDate": "2021-07-29T11:03:27.345+0000",
            "createdBy": null,
            "updatedDate": "2021-07-29T13:17:55.270+0000",
            "updateBy": "60b12c9e637d050012a7cf6b",
            "zohoCategoryId": "594850000000019627",
            "foodCategoryImage": "",
            "categoryType": "Food",
            "foodProducts": [
                {
                    "id": "6102aa6f03be56ca3924b8f9",
                    "zohoItemId": "594850000000022886",
                    "productName": "Kalyani Chicken Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019627",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B035",
                    "mrp": 500,
                    "discountedPrice": 400,
                    "rankOrder": 6,
                    "description": null,
                    "hsnCode": "5006096",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:11.059+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:11.059+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Chicken",
                    "spiceLevel": "2",
                    "categoryType": "Food",
                    "availableStock": "58.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa7003be56ca3924b900",
                    "zohoItemId": "594850000000022946",
                    "productName": "Kalyani Egg Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019627",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B037",
                    "mrp": 300,
                    "discountedPrice": 290,
                    "rankOrder": 6,
                    "description": null,
                    "hsnCode": "5006097",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:11.348+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:11.348+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Egg",
                    "spiceLevel": "3",
                    "categoryType": "Food",
                    "availableStock": "56.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa7003be56ca3924b907",
                    "zohoItemId": "594850000000022915",
                    "productName": "Kalyani Mutton Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019627",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B036",
                    "mrp": 200,
                    "discountedPrice": 160,
                    "rankOrder": 6,
                    "description": null,
                    "hsnCode": "5006096",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:11.652+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:11.652+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Mutton",
                    "spiceLevel": "2",
                    "categoryType": "Food",
                    "availableStock": "52.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa7003be56ca3924b910",
                    "zohoItemId": "594850000000022977",
                    "productName": "Kalyani Paneer Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019627",
                    "vegNonVegFlag": "Veg",
                    "sku": "B038",
                    "mrp": 200,
                    "discountedPrice": 160,
                    "rankOrder": 12,
                    "description": null,
                    "hsnCode": "5006978",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:11.938+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:11.938+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": null,
                    "spiceLevel": "1",
                    "categoryType": "Food",
                    "availableStock": "51.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa7603be56ca3924b992",
                    "zohoItemId": "594850000000022762",
                    "productName": "Thalassery  Chicken Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019627",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B031",
                    "mrp": 400,
                    "discountedPrice": 320,
                    "rankOrder": 17,
                    "description": null,
                    "hsnCode": "5006990",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:18.173+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:18.173+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Chicken",
                    "spiceLevel": "2",
                    "categoryType": "Food",
                    "availableStock": "128.000000",
                    "isFavorite": null,
                    "hubId": null
                }
            ]
        },
        {
            "id": "61028aa8294f460012c9101b",
            "categoryName": "Bombay Biryani",
            "rankOrder": 23,
            "status": "ACTIVE",
            "createDate": "2021-07-29T11:02:00.541+0000",
            "createdBy": null,
            "updatedDate": "2021-07-29T13:18:27.081+0000",
            "updateBy": "60b12c9e637d050012a7cf6b",
            "zohoCategoryId": "594850000000019605",
            "foodCategoryImage": "",
            "categoryType": "Food",
            "foodProducts": [
                {
                    "id": "6102aa6803be56ca3924b846",
                    "zohoItemId": "594850000000022576",
                    "productName": "Bombay Paneer Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019605",
                    "vegNonVegFlag": "Veg",
                    "sku": "B024",
                    "mrp": 400,
                    "discountedPrice": 360,
                    "rankOrder": 10,
                    "description": null,
                    "hsnCode": "50090994",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:03.459+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:03.459+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": null,
                    "spiceLevel": "3",
                    "categoryType": "Food",
                    "availableStock": "130.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa6703be56ca3924b832",
                    "zohoItemId": "594850000000022607",
                    "productName": "Bomaby Fish Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019605",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B025",
                    "mrp": 250,
                    "discountedPrice": 170,
                    "rankOrder": 11,
                    "description": null,
                    "hsnCode": "50090995",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:02.305+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:02.305+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Sea Food",
                    "spiceLevel": "2",
                    "categoryType": "Food",
                    "availableStock": "145.000000",
                    "isFavorite": null,
                    "hubId": null
                },
                {
                    "id": "6102aa6803be56ca3924b83d",
                    "zohoItemId": "594850000000022638",
                    "productName": "Bombay Egg Biryani",
                    "productImage": null,
                    "categoryId": "594850000000019605",
                    "vegNonVegFlag": "Non Veg",
                    "sku": "B026",
                    "mrp": 240,
                    "discountedPrice": 210,
                    "rankOrder": 16,
                    "description": null,
                    "hsnCode": "5009099",
                    "gstPercentageInter": "12",
                    "gstPercentageIntra": "12",
                    "status": "ACTIVE",
                    "createdDate": "2021-08-11T07:51:02.885+0000",
                    "createdBy": "Zoho Sync Script",
                    "updatedDate": "2021-08-11T07:51:02.885+0000",
                    "updatedBy": "Zoho Sync Script",
                    "nonVegType": "Egg",
                    "spiceLevel": "3",
                    "categoryType": "Food",
                    "availableStock": "-141.000000",
                    "isFavorite": null,
                    "hubId": null
                }
            ]
        },
fetch
react-native
api
EN

回答 2

Stack Overflow用户

发布于 2021-09-02 16:36:15

希望这能解决你的问题

代码语言：javascript
复制
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
FlatList
} from 'react-native';

const App = () => {
 const [data, setData] = useState([]);
useEffect(() => {
getFoodApi();
}, []);

function getFoodApi()
{
  setData({
    "foodProducts": {
      "hubId": "610299e303be56ca3924971e",
      "categories": [
        {
          "id": "61028aff294f460012c9101e",
          "categoryName": "Kalyani Biryani",
          "rankOrder": 6,
          "status": "ACTIVE",
          "createDate": "2021-07-29T11:03:27.345+0000",
          "createdBy": null,
          "updatedDate": "2021-07-29T13:17:55.270+0000",
          "updateBy": "60b12c9e637d050012a7cf6b",
          "zohoCategoryId": "594850000000019627",
          "foodCategoryImage": "",
          "categoryType": "Food",
          "foodProducts": [
            {
              "id": "6102aa6f03be56ca3924b8f9",
              "zohoItemId": "594850000000022886",
              "productName": "Kalyani Chicken Biryani",
              "productImage": null,
              "categoryId": "594850000000019627",
              "vegNonVegFlag": "Non Veg",
              "sku": "B035",
              "mrp": 500,
              "discountedPrice": 400,
              "rankOrder": 6,
              "description": null,
              "hsnCode": "5006096",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:11.059+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:11.059+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Chicken",
              "spiceLevel": "2",
              "categoryType": "Food",
              "availableStock": "58.000000",
              "isFavorite": null,
              "hubId": null
            },
            
            {
              "id": "6102aa7003be56ca3924b900",
              "zohoItemId": "594850000000022946",
              "productName": "Kalyani Egg Biryani",
              "productImage": null,
              "categoryId": "594850000000019627",
              "vegNonVegFlag": "Non Veg",
              "sku": "B037",
              "mrp": 300,
              "discountedPrice": 290,
              "rankOrder": 6,
              "description": null,
              "hsnCode": "5006097",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:11.348+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:11.348+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Egg",
              "spiceLevel": "3",
              "categoryType": "Food",
              "availableStock": "56.000000",
              "isFavorite": null,
              "hubId": null
            },
            {
              "id": "6102aa7003be56ca3924b907",
              "zohoItemId": "594850000000022915",
              "productName": "Kalyani Mutton Biryani",
              "productImage": null,
              "categoryId": "594850000000019627",
              "vegNonVegFlag": "Non Veg",
              "sku": "B036",
              "mrp": 200,
              "discountedPrice": 160,
              "rankOrder": 6,
              "description": null,
              "hsnCode": "5006096",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:11.652+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:11.652+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Mutton",
              "spiceLevel": "2",
              "categoryType": "Food",
              "availableStock": "52.000000",
              "isFavorite": null,
              "hubId": null
            },
            {
              "id": "6102aa7003be56ca3924b910",
              "zohoItemId": "594850000000022977",
              "productName": "Kalyani Paneer Biryani",
              "productImage": null,
              "categoryId": "594850000000019627",
              "vegNonVegFlag": "Veg",
              "sku": "B038",
              "mrp": 200,
              "discountedPrice": 160,
              "rankOrder": 12,
              "description": null,
              "hsnCode": "5006978",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:11.938+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:11.938+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": null,
              "spiceLevel": "1",
              "categoryType": "Food",
              "availableStock": "51.000000",
              "isFavorite": null,
              "hubId": null
            },
            {
              "id": "6102aa7603be56ca3924b992",
              "zohoItemId": "594850000000022762",
              "productName": "Thalassery  Chicken Biryani",
              "productImage": null,
              "categoryId": "594850000000019627",
              "vegNonVegFlag": "Non Veg",
              "sku": "B031",
              "mrp": 400,
              "discountedPrice": 320,
              "rankOrder": 17,
              "description": null,
              "hsnCode": "5006990",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:18.173+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:18.173+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Chicken",
              "spiceLevel": "2",
              "categoryType": "Food",
              "availableStock": "128.000000",
              "isFavorite": null,
              "hubId": null
            }
          ]//food products[0]
        }, //categories[0]
        {
          "id": "61028aa8294f460012c9101b",
          "categoryName": "Bombay Biryani",
          "rankOrder": 23,
          "status": "ACTIVE",
          "createDate": "2021-07-29T11:02:00.541+0000",
          "createdBy": null,
          "updatedDate": "2021-07-29T13:18:27.081+0000",
          "updateBy": "60b12c9e637d050012a7cf6b",
          "zohoCategoryId": "594850000000019605",
          "foodCategoryImage": "",
          "categoryType": "Food",
          "foodProducts": [
            {
              "id": "6102aa6803be56ca3924b846",
              "zohoItemId": "594850000000022576",
              "productName": "Bombay Paneer Biryani",
              "productImage": null,
              "categoryId": "594850000000019605",
              "vegNonVegFlag": "Veg",
              "sku": "B024",
              "mrp": 400,
              "discountedPrice": 360,
              "rankOrder": 10,
              "description": null,
              "hsnCode": "50090994",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:03.459+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:03.459+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": null,
              "spiceLevel": "3",
              "categoryType": "Food",
              "availableStock": "130.000000",
              "isFavorite": null,
              "hubId": null
            },
            {
              "id": "6102aa6703be56ca3924b832",
              "zohoItemId": "594850000000022607",
              "productName": "Bomaby Fish Biryani",
              "productImage": null,
              "categoryId": "594850000000019605",
              "vegNonVegFlag": "Non Veg",
              "sku": "B025",
              "mrp": 250,
              "discountedPrice": 170,
              "rankOrder": 11,
              "description": null,
              "hsnCode": "50090995",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:02.305+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:02.305+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Sea Food",
              "spiceLevel": "2",
              "categoryType": "Food",
              "availableStock": "145.000000",
              "isFavorite": null,
              "hubId": null
            },
            {
              "id": "6102aa6803be56ca3924b83d",
              "zohoItemId": "594850000000022638",
              "productName": "Bombay Egg Biryani",
              "productImage": null,
              "categoryId": "594850000000019605",
              "vegNonVegFlag": "Non Veg",
              "sku": "B026",
              "mrp": 240,
              "discountedPrice": 210,
              "rankOrder": 16,
              "description": null,
              "hsnCode": "5009099",
              "gstPercentageInter": "12",
              "gstPercentageIntra": "12",
              "status": "ACTIVE",
              "createdDate": "2021-08-11T07:51:02.885+0000",
              "createdBy": "Zoho Sync Script",
              "updatedDate": "2021-08-11T07:51:02.885+0000",
              "updatedBy": "Zoho Sync Script",
              "nonVegType": "Egg",
              "spiceLevel": "3",
              "categoryType": "Food",
              "availableStock": "-141.000000",
              "isFavorite": null,
              "hubId": null
            }
          
          ]
        }
      ]//categories
          }//foodApi
        })
}

return (
<SafeAreaView style={{flex:1}}>
  <Text>Name</Text>
    <FlatList
      style={{flex:1}}
      data={data.foodProducts.categories}
      keyExtractor={(item,index)=>index.toString()}
      renderItem={({ item, index }) => {
        return (
          
          <View style={{flex: 1}}>
            <Text> categoreyname  {item.categoryName}</Text>
            {item.foodProducts.map(ele => {
              return (
                <Text style={{ paddingLeft: 5 }}> productName { ele.productName}</Text>
              )
            })}
        </View>
        )
      }}
  />
</SafeAreaView>
);
};

const styles = StyleSheet.create({
 

});

export default App;
票数 0
EN

Stack Overflow用户

发布于 2021-09-08 06:41:27

Flatlist只循环对象数组。在您的代码中，您尝试过循环对象(data.foodProducts)。

将data={data.foodProducts}替换为data={data.foodproducts.categories}。现在它将循环，因为它是一个对象数组。

对象数组将与此[{name:"React",age:5}]类似。这将由单张表循环。

对象将与此{name:"react",age:5}类似。这不会被单张名单所套用。

可以使用console.log(typeof data.foodproducts)检查数据是数组还是对象。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68783960

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档