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函数需要一个回调函数，该函数返回一个布尔值以确定是否应包含一项。由于您的contect.filter调用没有从回调中返回任何内容，因此最后的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
});

搜索单位列表不返回任何结果

1 个答案: