搜索平面列表 returns 无结果

Question

我正在尝试从嵌套数组中获取商店名称，但没有得到任何结果，一切正常，但是当我在搜索栏中键入内容时，却什么也得不到（下图）。删除输入的内容后，我可以再次看到平面列表。我认为问题出在我从过滤器返回的数据上。这是我到目前为止所做的。

const Purchases = () => {
    const extractKey = ({purchases}) => purchases.toString();
    const [search, setSearch] = useState(content);

    function _searchFilterFunction(searchText, data) {
        let newData = [];
        if (searchText) {
            newData = content.filter(function (item) {
                item.purchases.filter(function (i) {
                    const itemData = i.name.toUpperCase();
                    const textData = searchText.toUpperCase();
                    return itemData.includes(textData);
                })

            });
            setSearch([...newData]);
        } else {
            setSearch([...data]);
        }
    }

    return (
        <View style={styles.container}>

            <TextInput
                style={styles.textInputStyle}
                placeholder="Search by Store"
                onChangeText={(value) => {
                    _searchFilterFunction(value, content);
                }}
            />
         
            <FlatList
                data={search}
                renderItem={renderItem}
                keyExtractor={extractKey}
            />
        </View>
    );
}

这是数组：

let content = [
    {
        date: 'September 8, 2012',
        total: 754,
        purchases: [
            {
                name: 'Virgin Megastores',
                time: '12:24',
                price: 432,
                icon: vms
            },
            {
                name: 'Apple Store',
                time: '13:43',
                price: 322,
                icon: apple
            }
        ]
    },
    {
        date: 'September 8, 2012',
        total: 754,
        purchases: [
            {
                name: 'Virgin Megastores',
                time: '12:24',
                price: 432,
                icon: vms
            },
            {
                name: 'Apple Store',
                time: '13:43',
                price: 322,
                icon: apple
            }
        ]
    },
]

Answer 1

您的问题在于您过滤数据的方式。

newData = content.filter(function (item) {
    item.purchases.filter(function (i) {
        const itemData = i.name.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.includes(textData);
    });
});

filter 函数需要一个回调函数，return 是一个布尔值以确定是否应包含某个项目。因为您的 contect.filter 调用没有 return 来自其回调的任何内容，所以最终 newData 是空的。

所以让我们尝试将代码调整为有效的东西

newData = content.filter(function (item) {
    // check if any purchase has matches; and keep the filtered results
    const filteredPurchases = item.purchases.filter(function (i) {
        const itemData = i.name.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.includes(textData);
    });

    // now let the parent know if it should include this item in the filter
    // if the length is higher than zero, filter will include this item
    return filteredPurchases.length;
});

在您的评论中，您说您只想显示适用的购买。让我们稍微调整一下代码。我们将 map 内容仅包含适用的购买，然后 filter 所有具有适用购买的项目

newData = content.map(function (item) {
    // check if any purchase has matches; and keep the filtered results
    const filteredPurchases = item.purchases.filter(function (i) {
        const itemData = i.name.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.includes(textData);
    });

    // now return a newly composed item with only applicable purchases
    return {
      ...item,
      purchases: filteredPurchases
    };
}).filter(function (item) {
   // now only keep items with applicable purchases.
   return item.purchases.length
});

搜索平面列表 returns 无结果

Searching through a flatlist returns no results

searchbar

react-native

react-native-flatlist