React Native如何筛选JSON指定数据并通过FlatList渲染

完全可以实现仅渲染JSON中指定店铺对应的数据，具体实现步骤如下：

1. 筛选目标店铺数据 #

你可以直接使用JavaScript数组的find()方法，从shopData数组中精准匹配到指定名称的店铺条目：

// 假设你的JSON数据已经导入，变量名为rawData
const targetShop = rawData.shopData.find(shop => shop.shop_name === 'GIANT');
// 拿到目标店铺下的所有商品列表
const renderDataSource = targetShop ? targetShop.itemData : [];

如果需要同时筛选多个符合条件的店铺，可改用filter()方法匹配后，通过flatMap()合并所有店铺的商品数据：

// 示例：同时展示NTUC和GIANT的所有商品
const renderDataSource = rawData.shopData
  .filter(shop => ['NTUC', 'GIANT'].includes(shop.shop_name))
  .flatMap(shop => shop.itemData);

2. 传入FlatList完成渲染 #

把上一步得到的renderDataSource直接传给FlatList的data属性即可，完整示例代码如下：

import React from 'react';
import { FlatList, View, Text, Image, StyleSheet } from 'react-native';
// 导入你的JSON文件（根据实际路径调整）
import rawData from './你的JSON文件路径.json';

const ShopItemList = () => {
  // 筛选GIANT店铺的商品
  const targetShop = rawData.shopData.find(shop => shop.shop_name === 'GIANT');
  const dataSource = targetShop ? targetShop.itemData : [];

  // 渲染单个商品条目
  const renderItem = ({ item }) => (
    <View style={styles.itemCard}>
      <Image source={{ uri: item.image }} style={styles.itemImg} />
      <Text style={styles.itemName}>{item.name}</Text>
      <Text>价格：${item.price}</Text>
      <Text>库存：{item.stock}</Text>
      <Text>限购：{item.purchase_limit}件</Text>
    </View>
  );

  return (
    <FlatList
      data={dataSource}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      style={styles.listContainer}
    />
  );
};

const styles = StyleSheet.create({
  listContainer: {
    padding: 10
  },
  itemCard: {
    marginBottom: 15,
    padding: 10,
    borderRadius: 8,
    backgroundColor: '#fff'
  },
  itemImg: {
    width: '100%',
    height: 150,
    borderRadius: 8,
    marginBottom: 10
  },
  itemName: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 5
  }
});

export default ShopItemList;

注意事项 #

• 筛选时建议增加空值判断，避免匹配不到对应店铺时出现报错
• FlatList的keyExtractor必须返回唯一值，这里直接使用商品的id字段即可

内容的提问来源于stack exchange，提问作者Luke Tan