通过2个字典值反应本机搜索

Question

我有一些JSON(见末尾(，其中包含两个值。我需要搜索根据任一值进行筛选。我记录了代码搜索/显示的每个部分

这是我的useState变量：

const [dataBackup, setdataBackup] = useState([]) const [dataSource, setdataSource] = useState([])

这是我的平面清单：

<SectionList
contentContainerStyle={{ paddingHorizontal: 10}}
stickySectionHeadersEnabled={false}
sections={dataSource}
keyExtractor={(item, index) => {
return  index.toString();
}}
renderSectionHeader={({ section }) => (
<>
<Text style={styles.sectionHeader}>{section.title}</Text>
{section.data ? (
<OptimizedFlatList
horizontal
data={section.data} 
keyExtractor={(item, index) => {
return  index.toString();
}}
renderItem={({ item }) => <ListItem item={item} navigation={navigation} />}
showsHorizontalScrollIndicator={false}
/>
) : null}
</>
)}
renderItem={({ item, section, navigation }) => {
if (section.data) {
return null;
}
return <ListItem item={item} navigation={navigation}/>;
}}
/>

以下是不工作过滤逻辑：

filterList = (text) => {
for (let i = 0; i < dataBackup.length; i++) {
const t = dataBackup[i];
newData = t["data"].filter((item) => {
const itemData = item["name"].toLowerCase();
const textData = text.toLowerCase();
setdataSource(itemData.indexOf(textData) > -1)
});
}
}

数据如下：

[{
title: 'Leg',
data:[
{
"bodyPart": "lower legs",
"equipment": "assisted",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/1708.gif",
"id": "1708",
"name": "assisted lying calves stretch",
"target": "calves",
"broad_target": "legs",
"ppl": "legs"
},
{
"bodyPart": "lower legs",
"equipment": "smith machine",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/1396.gif",
"id": "1396",
"name": "smith toe raise",
"target": "calves",
"broad_target": "legs",
"ppl": "legs"
}
]
},
{
title: 'Back',
data:[
{
"bodyPart": "Back",
"equipment": "assisted",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/1708.gif",
"id": "1708",
"name": "Back1",
"target": "Back",
"broad_target": "Back",
"ppl": "Pull"
},
{
"bodyPart": "Back",
"equipment": "smith machine",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/1396.gif",
"id": "1396",
"name": "Back2",
"target": "Back",
"broad_target": "Back",
"ppl": "Pull"
}
]
}]

我希望它按标题或名称进行筛选

Answer 1

所以我在数据对象上看不到标题字段。但这就是你找到精确匹配的方法。该实现用于对名称和设备进行过滤。如果需要部分匹配，可以执行item.name.toLowerCase((.split(/\s+|./(.includs(query.toLoweCase(((

const dataSample = [
{ "title": "red", 
"data": [{
"bodyPart": "back",
"broad_target": "back",
"equipment": "cable",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/0007.gif",
"id": 1,
"name": "alternate item",
"ppl": "pull",
"target": "lats",
"thumbnail": "https://images.unsplash.com/photo-1640334554717-a7a4ce5d0045?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=296&q=20"
}
]
},
{ "title": "blue", 
"data": [{
"bodyPart": "back",
"broad_target": "back",
"equipment": "cable",
"gifUrl": "http://d205bpvrqc9yn1.cloudfront.net/0007.gif",
"id": 1,
"name": "alternate",
"ppl": "pull",
"target": "lats",
"thumbnail": "https://images.unsplash.com/photo-1640334554717-a7a4ce5d0045?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=296&q=20"
}
]
}
]

const filterData = (data = [], query) =>
data.filter(item => item.title.toLowerCase() === query.toLowerCase()
||
item.data.find(element => element.name.toLowerCase() === query.toLowerCase())
)
console.log(filterData(dataSample, 'alternate'))
console.log(filterData(dataSample, 'red'))

试试这个，根据你的评论更新：

const filterData = (data = [], query) =>
data.filter(item => item.title.toLowerCase().includes(query.toLowerCase())
||
item.data.find(element => element.name.toLowerCase().includes(query.toLowerCase()))
)
<SearchBar 
onChangeText={(text) =>
text.length !== 0 ? 
setdataSource(filterData(dataBackup, text)): 
setdataSource(dataBackup)} 
onClearPress={() => setdataSource(dataSource)} 
/>

当我再次思考时，这是适用于您的案例的完美解决方案，涵盖了所有其他场景。

useEffect(() => {
console.log("search key", searchKey)
if(searchKey.length != 0){
setdataSource(filterData(dataBackup, searchKey))
} else{
setdataSource(dataBackup)
} 
}, [searchKey])
const filterData = (data = [], query) => {

const foundItems = searchForItem(data, query)
const foundDataItems = searchForDataInItem(data, query)
const uniqueItemTitles = [...new Set([...Object.keys(foundItems),...Object.keys(foundDataItems)])];
return uniqueItemTitles.reduce((title, accumulator) => {
const itemHadTitleMatchedToQuery = foundItems.find(element => element.title === title)
const itemHadDataMatchedToQuery = foundDataItems.find(element => element.title === title)
if(itemHadTitleMatchedToQuery) {
accumulator.push({
...itemHadTitleMatchedToQuery
})
} else {
accumulator.push({
...itemHadDataMatchedToQuery
})
}
return accumulator;
}, []);
}
const searchForItem = (data = [], query) => {
const result = data.filter(item => 
item.title.toLowerCase().includes(query.toLowerCase())

)
return result
}
const searchForDataInItem = (data = [], query) => {
return data.map(item => {
return { ...item, data: item.data.filter(element => element.name.toLowerCase().includes(query.toLowerCase()))}
}).filter(item => item.data.length != 0)
}

Answer 2

在与@Dheeraj Sharma合作后，我们提出了：

useEffect(() => {
console.log("search key", searchKey)
if(searchKey.length != 0){
setdataSource(filterData(dataBackup, searchKey))
} else{
setdataSource(dataBackup)
} 
}, [searchKey])
const filterData = (data = [], query) => {

const foundItems = searchForItem(data, query)
const foundData = searchForDataInItem(data, query)
if(foundItems.length !== 0){
return foundItems;
}
return foundData
}
const searchForItem = (data = [], query) => {
const result = data.filter(item => 
item.title.toLowerCase().includes(query.toLowerCase())

)
return result
}
const searchForDataInItem = (data = [], query) => {
return data.map(item => {
return { ...item, data: item.data.filter(element => element.name.toLowerCase().includes(query.toLowerCase()))}
}).filter(item => item.data.length != 0)
}