我一直在努力与搜索栏在我的应用程序的几天,问题是,当我搜索特定名称的产品与该名称的产品显示,但当我清除搜索栏的整个产品消失后,清除搜索栏不显示?
下面是我的代码:
const Home =()=>{
// State
const [categories, setCategories] = useState(categoryData)
const [selected, setSelected] = useState(null)
const [productst, setProducts] = useState (ProductData)
// seach function
function handleSearch(text){
const filterData = productst.filter((item)=>{
return item.name.toLowerCase().includes(text.toLowerCase())
})
setProducts(filterData)
}
function renederHeader(){
return(
//Search Input
<View style={{ marginTop:SIZES.margin,}} >
<TouchableOpacity
onPress={()=>{}}
style={{
flexDirection:'row',
alignSelf:'center',
}}>
<TextInput
placeholder=" Find Your Favourite..."
placeholderTextColor={COLORS.lightGrey20}
// value={}
onChangeText={text=>handleSearch(text)}
/>
</TouchableOpacity>
</View>
}
function renderCategories(){
return(
<View
style={{
marginTop:20,
}}
>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categories}
keyExtractor={item=>item.id}
renderItem={({item,index})=>{
return(
<TouchableOpacity
onPress={()=>onSelecteCategory(item)}>
)
字符串
我的产品数据:
export const ProductData = [
{
id: 1,
name:'Coffee',
categories: [1],
image: require('../asset/images/coffee1.png'),
index: 0,
},
{
id: 2,
name:'Coffee',
categories: [1],
image: require('../asset/images/coffee2.png'),
index: 0,
},
{
id: 3,
name:'Coffee',
categories: [1],
image: require('../asset/images/coffee3.png'),
index: 0,
},
{
id: 4,
name:'Tea',
categories: [2],
image: require('../asset/images/Tea1.png'),
index: 0,
}, {
id: 5,
name:'Tea',
categories: [2],
image: require('../asset/images/Tea2.png'),
index: 0,
},
{
id: 6,
name:'Tea',
categories: [2],
image: require('../asset/images/Tea3.png'),
index: 0,
},
{
id: 7,
name:'choclate',
categories: [3],
image: require('../asset/images/choclate1.png'),
index: 0,
},
{
id: 8,
name:'choclate',
categories: [3],
image: require('../asset/images/choclate2.png'),
index: 0,
},
{
id: 9,
name:'choclate',
categories: [3],
image: require('../asset/images/choclate3.png'),
index: 0,
},
]
型
所以,请如果任何人都可以帮助我如何在酒吧搜索,并获得某些产品,当我清除搜索栏的所有产品应该显示正常不消失,因为它是现在.
1条答案
按热度按时间qvk1mo1f1#
处理函数接受状态变量products作为过滤器的输入。因此,可能值的数组随着过滤的每次迭代而减少,即使输入被删除。
尝试使用product数据数组作为输入。这将导致过滤器总是查看整个数据集,无论输入何时更改。