#react-native #filter #asyncstorage
#react-native #Фильтр #asyncstorage
Вопрос:
Я создаю приложение на react-native с публикацией и получением данных из AsyncStorage, все работает хорошо, я могу сохранить данные и получить их, но у меня проблема с правильной настройкой панели фильтров. Это работает только в одном направлении, например, когда я что-то пишу внутри ввода, я вижу результаты, которые соответствуют, однако, когда я удаляю символы из ввода, данные не возвращаются в нормальное состояние, и я ничего не вижу, даже если панель фильтров пуста, у кого-нибудь есть предложения, как это исправить?
constructor(props) {
super(props);
this.state = {
search: "",
data: [],
error: ""
};
}
handleTextChange = search => {
this.setState({ search });
let data = this.state.data;
data = data.filter(el => el.name.match(search))
this.setState({data:data})
};
_displayAllData = () => {
return this.state.data.map(el => {
return (
<View>
<Text >
Nazwa: <Text>{el.name}</Text>
</Text>
<View>
<Text>
Ulica: <Text>{el.street}</Text>
</Text>
</View>
</View>
);
});
};
render() {
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
placeholder="find results"
onChangeText={this.handleTextChange}
value={this.state.search}
/>
</View>
{this._displayAllData()}
<View>
<Text>{this.state.error}</Text>
</View>
</View>
</ScrollView>
);
}
Ответ №1:
Это происходит потому, что вы выполняете фильтрацию по исходному списку (массиву данных). Попробуйте одно, возьмите два массива, один для отображения списка данных фильтра, а другой для исходного списка данных.
Пожалуйста, смотрите приведенный ниже код. Дайте мне знать, если возникнут какие-либо проблемы с этим решением.
constructor(props) {
super(props);
this.state = {
search: "",
data: [],
filterData:[], // take one more list to show filter data list
error: ""
};
}
Изначально добавьте одни и те же данные в оба списка:
componentWillMount(){
this.setState({data: //set your data, filterData: //set same data})
}
Обрабатывает данные поиска:
handleTextChange = search => {
this.setState({ search });
let data = this.state.data;
//apply filter to your original list
data = data.filter(el => el.name.match(search))
this.setState({filterData:data}) //set filter result in your filterData list.
};
Используйте filterDataList для отображения вашего списка
_displayAllData = () => {
return this.state.filterData.map(el => {
return (
<View>
<Text >
Nazwa: <Text>{el.name}</Text>
</Text>
<View>
<Text>
Ulica: <Text>{el.street}</Text>
</Text>
</View>
</View>
);
});
};
Комментарии:
1. ах, я чувствовал, что данные должны быть продублированы в первую очередь, но совершенно не знал, как это сделать дальше, все работает отлично! большое тебе спасибо, приятель:)