对于本机反应，有没有办法只反应 json 文件中的某些数据并渲染它？答案

【问题标题】：For react native, is there a way to only reactive certain data from a json file and render it?对于本机反应，有没有办法只反应 json 文件中的某些数据并渲染它？
【发布时间】：2021-12-14 07:14:31
【问题描述】：

我的 JSON 文件结构如下：

{
     "shopData": [
      {
         "shop_id" : "1",
         "shop_name":"NTUC",
         "itemData":[
             {
             "id" : "3",
             "shop_name":"NTUC",
             "image" :"https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2021/01/Baked-Salmon-1-2.jpg",
             "name":"Salmon fillet",
             "price": 16,
             "purchase_limit": "5",
             "stock": "20"
         },
         {
             "id" : "1",
             "shop_name" :"NTUC",
             "image" : "https://images.unsplash.com/photo-1603664454146-50b9bb1e7afa?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fG9yYW5nZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80",
             "name" : "Orange",
             "price": 10,
             "purchase_limit": "3",
             "stock": "15"
          },
          {
             "id" : "2",
             "shop_name" :"NTUC",
             "image" :"https://upload.wikimedia.org/wikipedia/commons/8/89/Tomato_je.jpg",
             "name":"Tomato",
             "price": 5,
             "purchase_limit": "7",
             "stock": "18"
          } ,
         {
             "id" : "4",
             "shop_name" : "NTUC",
             "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIK0wJschQcumCEBOnWbs6qcjZHcPpHPRETQ&usqp=CAU",
             "name":"Greens",
             "price": 3,
             "purchase_limit": "3",
             "stock": "25"
         }
 
 
         ]
         
       },
       {
         "shop_id" : "2",
         "shop_name":"GIANT",
         "itemData": [
             {
                 "id" : "5",
                 "shop_name" : "GIANT",
                 "image": "https://www.jocooks.com/wp-content/uploads/2020/05/dark-rye-bread-1-17.jpg",
                 "name" : "RyeBread",
                 "price": 20,
                 "purchase_limit": "5",
                 "stock": "15"
              },
              {
                "id" : "6",
                "shop_name" : "GIANT",
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFca-tLIQoXKEBi8EkM4eAmh0cWccPtE34fA&usqp=CAU",
                "name" : "Carrot",
                "price": 7,
                "purchase_limit": "6",
                "stock": "15"
             }
 
         ]
 
 
       }
            
     ]   
}

为此，有没有一种方法可以让我有选择地选择仅在我的平面列表上呈现哪一组数据？

例如我只想用shop_name = "GIANT"显示数据

编辑：有什么方法可以从 shopData 数组中选择特定的商品（商店），然后在 FlatList 的帮助下渲染它们？

【问题讨论】：

标签： wordpress react-native filtering display data-processing

【解决方案1】：

在 React Native（和 Javascript）中，您必须通过解析为 Javascript 对象的 JSON 数据进行映射。在循环它们时（例如 .map()），您可以有条件地显示它们。

但是，在平面列表示例中，您可以使用 useMemo 预先准备数据来记忆过滤后的数据。

import React, { useMemo } from 'react'

const Component = (data) => {

    const finalDataToDisplay = useMemo(() => {
        return data.filter( x => x.shop_name === "GIANT")
    },[data])

    return       <FlatList
                        data={finalDataToDisplay}
                        renderItem={renderItem}
                        keyExtractor={item => item.id}
                  />
}

然后我们可以轻松地使用平面列表中的finalDataToDisplay 作为数据源。

.filter() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

<FlatList /> - https://reactnative.dev/docs/flatlist

【讨论】：