如何解决按词搜索后如何取回我的数据列表？
我使用 Flatlist 并在 renderHeader() 函数上按单词搜索。我可以过滤，但是当我删除字母时，我无法再次获得主列表。我认为有一个逻辑问题，但我尝试了一些之后找不到......
当我解决问题时，我有了一个新的。我试图修复，但我做不到，我应该把问题交给专家:)
import React,{Component,useState} from 'react'
import {
Text,StyleSheet,View,FlatList,SafeAreaView,ScrollView,Image,TextInput,} from 'react-native'
import data from '../../data'
const Flatlistexample = () => {
//main list state
let [list,setList] = useState(data);
//search state
const [search,setSearch] = useState('');
//search filter
searchFilter = text => {
// onChangeText
const newData = list.filter(item => {
const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
return listItem.indexOf(text.toLowerCase()) > -1;
})
setList(newData)
}
//search function
renderHeader = () =>{
return (
<View style={styles.seachContainer}>
<TextInput
style={styles.textInput}
placeholder={'Search...'}
value={search}
onChangeText={text => {
//setStates
searchFilter(text)
setSearch(text)
}}></TextInput>
<Text
style={{
alignItems: 'flex-start',color: 'black',fontSize: 22,}}>
{search}
</Text>
</View>
)
}
return (
<SafeAreaView
style={{
flex: 1,}}>
<FlatList
data={list}
renderItem={({item,index}) => {
return (
<ScrollView>
<SafeAreaView
style={[
styles.container,{backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},]}>
<Image style={styles.profile} source={{uri: item.picture}} />
<View style={styles.rightside}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.company}>{item.company}</Text>
</View>
</SafeAreaView>
</ScrollView>
)
}}
keyExtractor={item => item._id}
//called search function
ListHeaderComponent={renderHeader()}
/>
</SafeAreaView>
)
}
export default Flatlistexample
const styles = StyleSheet.create({
container: {
flexDirection: 'row',alignItems: 'center',borderBottomWidth: 1,borderColor: 'gray',},profile: {
width: 50,height: 50,borderRadius: 25,marginLeft: 10,rightside: {
marginLeft: 20,justifyContent: 'space-between',marginVertical: 5,name: {
fontSize: 22,marginBottom: 10,searchContainer: {
padding: 10,borderWidth: 2,textInput: {
fontSize: 16,backgroundColor: '#f9f9f9',padding: 10,})感谢您的帮助
解决方法
过滤数据
onSearchText = (value) => {
this.setState({searchText: value})
if(value.trim() == "" || value == null){
this.setState({list: this.state.list}
} else {
let filter = this.state.list.fillter(data => {
// data fillter logic //
return data;
})
this.setState({filterData: filter})
}
渲染平面列表
<FlatList
extradata={this.state}
data={searchText ? filterData : list}
/>
我修复了...
怎么样？
我的主要数据状态是恒定的，我正在使用过滤器状态过滤数据列表。所以我的数据列表不会随时更改。
import React,{Component,useState} from 'react'
import {
Text,StyleSheet,View,FlatList,SafeAreaView,ScrollView,Image,TextInput,} from 'react-native'
import data from '../../data'
const Flatlistexample = () => {
//main list state
let [list,setList] = useState(data)
//search state
const [search,setSearch] = useState('')
//filter state
const [updated,setUpdated] = useState(data)
//search filter
searchFilter = text => {
// onChangeText
if (text) {
const newData = list.filter(item => {
const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
return listItem.indexOf(text.toLowerCase()) > -1
})
setUpdated(newData)
}
//search function
renderHeader = () => {
return (
<View style={styles.seachContainer}>
<TextInput
style={styles.textInput}
placeholder={'Search...'}
value={search}
onChangeText={text => {
searchFilter(text)
setSearch(text)
}}></TextInput>
<Text
style={{
alignItems: 'flex-start',color: 'black',fontSize: 22,}}>
{search}
</Text>
</View>
)
}
return (
<SafeAreaView
style={{
flex: 1,}}>
<FlatList
//i'm showing filter state
data={updated}
renderItem={({item,index}) => {
return (
<ScrollView>
<SafeAreaView
style={[
styles.container,{backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},]}>
<Image style={styles.profile} source={{uri: item.picture}} />
<View style={styles.rightside}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.company}>{item.company}</Text>
</View>
</SafeAreaView>
</ScrollView>
)
}}
keyExtractor={item => item._id}
//called search function
ListHeaderComponent={renderHeader()}
/>
</SafeAreaView>
)
}
export default Flatlistexample
const styles = StyleSheet.create({
container: {
flexDirection: 'row',alignItems: 'center',borderBottomWidth: 1,borderColor: 'gray',},profile: {
width: 50,height: 50,borderRadius: 25,marginLeft: 10,rightside: {
marginLeft: 20,justifyContent: 'space-between',marginVertical: 5,name: {
fontSize: 22,marginBottom: 10,searchContainer: {
padding: 10,borderWidth: 2,textInput: {
fontSize: 16,backgroundColor: '#f9f9f9',padding: 10,})
/*
else if(text.length > uzunluk){
setList(data)
const newData = list.filter(item => {
const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
return listItem.indexOf(text.toLowerCase()) > -1;
})
setList(newData)
}else if(text.length<uzunluk){
setList(data)
const newData = list.filter(item => {
const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`
return listItem.indexOf(text.toLowerCase()) > -1;
})
setList(newData)
}
*/版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。