我正在開發一個功能，當用戶輸入時TextInput它會過濾陣列中的專案data并顯示在FlatList搜索結果中，當我第一次渲染螢屏時開始輸入時它可以作業，但是當我開始取消 中的文本并重TextInput試時，它只回傳空陣列，并且在 中沒有顯示任何內容FlatList，并且在useEffect我得到相同的陣列兩次。
大批
Array [
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
Object {
"id": 2,
"price": 1,
"selected": false,
"title": "Tomato Sauce",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.101,
"image": "https://images.unsplash.com/photo-1623653387945-2fd25214f8fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Garlic Knots",
},
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
Object {
"id": 2,
"price": 1,
"selected": false,
"title": "Tomato Sauce",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.102,
"image": "https://images.unsplash.com/photo-1623653387945-2fd25214f8fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Mozzerella Sticks",
},
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 0,
"selected": false,
"title": "Hot Sauce",
"type": "Sauces",
},
Object {
"id": 1,
"price": 0,
"selected": false,
"title": "Medium Sauce",
"type": "Sauces",
},
],
"id": 1,
"required": true,
"title": "Sauces",
},
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.103,
"image": "https://images.unsplash.com/photo-1623653387945-2fd25214f8fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Buffalo Wings",
},
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
Object {
"id": 2,
"price": 1,
"selected": false,
"title": "Caesar",
"type": "Sides",
},
Object {
"id": 3,
"price": 1,
"selected": false,
"title": "Honey Mustard",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.201,
"image": "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Garden Salad",
},
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
Object {
"id": 2,
"price": 1,
"selected": false,
"title": "Caesar",
"type": "Sides",
},
Object {
"id": 3,
"price": 1,
"selected": false,
"title": "Honey Mustard",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.202,
"image": "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Greek Salad",
},
Object {
"additional": Array [
Object {
"data": Array [
Object {
"id": 0,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
Object {
"id": 2,
"price": 1,
"selected": false,
"title": "Caesar",
"type": "Sides",
},
Object {
"id": 3,
"price": 1,
"selected": false,
"title": "Honey Mustard",
"type": "Sides",
},
],
"id": 0,
"required": false,
"title": "Sides",
},
],
"description": "vsjvnmvimrivmeirv",
"id": 0.203,
"image": "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"price": 6.95,
"title": "Caesar Salad",
},
]
螢屏
function Orders({ navigation, newOrder }) {
const [search, setSearch] = useState("");
const [filteredDataSource, setFilteredDataSource] = useState([]);
useEffect(() => {
const starCountRef = ref(dbMenu, 'menu');
onValue(starCountRef, (snapshot) => {
const data = snapshot.val(); <-------------------------------Array
if (filteredDataSource.length == 0) {
data.map((item) => {
item.data.map((item) => {
let array = filteredDataSource;
array.push(item)
setFilteredDataSource([...array])
})
})
}
});
}, []);
const searchFilterFunction = (text) => {
if (text) {
const newData = filteredDataSource.filter(function (item) {
const itemData = item.title
? item.title.toUpperCase()
: "".toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
setShowSearch(true)
} else {
setFilteredDataSource(filteredDataSource);
setSearch(text);
}
};
return (
<View>
<TextInput
onChangeText={(text) => searchFilterFunction(text)}
clearButtonMode='while-editing'
style={styles.searchAddress}
placeholder={'Search menu'}
autoFocus={true}
value={search}
returnKeyType='search'
/>
<FlatList
data={filteredDataSource}
keyExtractor={(item) => item.id}
renderItem={({ item }) => {
return (
<TouchableOpacity key={item.id} onPress={() =>navigateToItemFromModal(item)}>
<Text>{item.title}</Text>
<Text>${item.price}</Text>
</TouchableOpacity>
)
}} />
</View>
)
}
uj5u.com熱心網友回復：
當您輸入 textInput 時，您正在從以前的過濾資料中搜索，一旦過濾的資料變空，那么所有下一次搜索都將發生在空陣列中，您只是被困在空陣列中，以避免采用存盤原始資料的虛擬狀態。
我已經修改了你的代碼希望這會有所幫助
function Orders({ navigation, newOrder }) {
const [search, setSearch] = useState("");
const [filteredDataSource, setFilteredDataSource] = useState([]);
const [filteredDataOriginal, setfilteredDataOriginal] = useState([]);
useEffect(() => {
const starCountRef = ref(dbMenu, 'menu');
onValue(starCountRef, (snapshot) => {
const data = snapshot.val();
if (filteredDataSource.length == 0) {
let array = [];
data.map((item) => {
item.data.map((dataItem) => {
array.push(dataItem)
})
})
setFilteredDataSource([...array])
setfilteredDataOriginal([...array])
}
});
}, []);
const searchFilterFunction = (text) => {
if (text) {
const newData = filteredDataOriginal.filter(function (item) {
const itemData = item.title
? item.title.toUpperCase()
: "".toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
setShowSearch(true)
} else {
setFilteredDataSource(filteredDataOriginal);
setSearch(text);
}
};
return (
<View>
<TextInput
onChangeText={(text) => searchFilterFunction(text)}
clearButtonMode='while-editing'
style={styles.searchAddress}
placeholder={'Search menu'}
autoFocus={true}
value={search}
returnKeyType='search'
/>
<FlatList
data={filteredDataSource}
keyExtractor={(item) => item.id}
renderItem={({ item }) => {
return (
<TouchableOpacity key={item.id} onPress={() =>navigateToItemFromModal(item)}>
<Text>{item.title}</Text>
<Text>${item.price}</Text>
</TouchableOpacity>
)
}} />
</View>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/431315.html
標籤：javascript 数组 反应 反应式 筛选