React本机，搜索筛选器未正常工作
React本机，搜索筛选器未正常工作
提问于 2021-07-27 22:10:01
我有一个用扁平列表呈现的案例列表，我为此实现了一个搜索功能。我面临的问题是，当用户输入错误的单词时，例如用户想输入“急性”，但他输入了错误的“Acuti”。当用户从Acuti中删除i时，它应该重新渲染平面列表，但它返回的是空列表。当用户从Acuti中删除i并键入e时，同样的情况也会发生，如Acuti中的急性。我不知道问题出在哪里。
这是我的搜索代码
const searchCases = e => {
console.log('Text', e);
let text = e.toLowerCase();
let filteredName = caseArray.filter(item => {
return item.name[0].name.toLowerCase().match(text);
});
if (!text || text === '') {
updateState({caseArray: listCase});
} else if (Array.isArray(filteredName)) {
updateState({caseArray: filteredName});
}
};这是我的平面表
<FlatList
data={caseArray}
keyExtractor={(item, index) => String(index)}
ListEmptyComponent={() => (
<Text
style={{
...commonStyles.fontBold24,
color: colors.blackOpacity40,
textAlign: 'center',
marginTop: moderateScaleVertical(100),
}}>
{strings.NO_DATA_FOUND}
</Text>
)}
renderItem={renderCase}
/>任何人都可以帮助我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-27 23:49:53
确保您总是在实际数据上搜索，而不是过滤后的数据
例如，你有一个传递给FlatList的数组"x“，你想要搜索它。在执行任何操作之前，请确保将数据复制到另一个状态或变量。因为如果您没有将数据复制到其他地方，那么当您取消搜索时，您将不会得到实际的数组。
const searchCases = e => {
console.log('Text', e);
let text = e.toLowerCase();
let filteredName = copyCaseArray.filter(item => { // copy of caseArray
return item.name[0].name.toLowerCase().match(text);
});
if (!text || text === '') {
updateState({caseArray: listCase});
} else if (Array.isArray(filteredName)) {
updateState({caseArray: filteredName});
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68546501
复制相关文章
相似问题
腾讯云开发者
