过滤 React 原生部分列表中的数据

Question

我正在使用 React Native 的 SectionList。节列表的数据如下所示

data: [
{
title: "Asia",
data: ["Taj Mahal", "Great Wall of China", "Petra"]
},
{
title: "South America",
data: ["Machu Picchu", "Christ the Redeemer", "Chichen Itza"]
},
{
title: "Europe",
data: ["Roman Colosseum"]
}
]

我有一个文本输入，我尝试使用它过滤掉部分列表中的内容。我尝试使用Array.filter()它似乎不起作用。它返回我整个数据，无需任何过滤。所以，我尝试了Array.some().现在，即使有一个项目匹配，也会过滤该部分中的所有数据项。此行为应超出Array.some()。但是我很困惑为什么Array.filter()在我的情况下不起作用。

我的部分列表看起来像这样，

<SectionList 
sections={this.state.data.filter(sectionData => {
sectionData = sectionData.data;
return sectionData.filter(data => {
return data.includes(this.state.searchTerm);
})
})}
renderSectionHeader={({ section: { title } }) => ( <Text style={{ fontWeight: "bold" }}>{title}</Text> )}
renderItem={({ item }) => ( <Text style={styles.listItem}>{item}</Text>)}
keyExtractor={item => item}
/>

这是世博游乐场的链接，如果你想在线玩它。

Answer 1

filter将创建一个新数组，其中包含返回真实值的所有条目。你的第二个过滤器将始终返回至少一个空数组，这是真实的，因此你在最终结果中得到了所有部分。

您可以尝试reduce和filter的组合：

this.state.data.reduce((result, sectionData) => {
const { title, data } = sectionData;
const filteredData = data.filter(
element => element.includes(this.state.searchTerm)
);
if (filteredData.length !== 0) {
result.push({
title,
data: filteredData
});
}
return result;
}, [])