У меня есть некоторые примеры данных массива, и я хочу отфильтровать плоский список на основе выбранных критериев (состояние). Тем не менее, переменная состояния изменяется, когда я нажимаю кнопку, а плоский список - нет. Я должен нажать кнопку второй раз, чтобы плоский список изменился
Моя ситуация в изображении:
В начале (this.state.state = 'All' ) -> 1-е изображение
Я нажимаю кнопку Джохор, переменная this.state.state обновилась до «Джохор», но плоский список не изменился - > 2nd Image
Я снова нажимаю кнопку Melaka, переменная this.state.state снова обновляется до «Melaka», но плоский список изменяется в зависимости от « Переменная Джохора -> 3-е изображение
Ниже приведена моя кодировка.
import React, { Component } from 'react';
import { Text, StyleSheet, View, TouchableOpacity, FlatList, SafeAreaView, } from 'react-native';
//Render FlatList Item
Healthcare = ({ id, name, state }) => {
return (
<View style={[styles.healthcareItemList]}>
<TouchableOpacity style={[styles.healthcareItemTextView]}>
<Text style={{ fontSize: 16, lineHeight: 22, color: '#4A4A4A' }}>{name}</Text>
<Text style={{ fontSize: 12, lineHeight: 16, color: '#4A4A4A' }}>{state}</Text>
</TouchableOpacity>
</View >
);
}
export default class FindHealthcare extends Component {
constructor(props) {
super(props);
this.state = {
state: 'All',
healthcare: '',
healthcareListSearchHolder: [{
id: '1',
name: 'Hospital 1',
state: 'Johor',
},
{
id: '2',
name: 'Hospital 2',
state: 'Melaka',
},
{
id: '3',
name: 'Hospital 3',
state: 'Kedah',
}],
healthcareList: [{
id: '1',
name: 'Hospital 1',
state: 'Johor',
},
{
id: '2',
name: 'Hospital 2',
state: 'Melaka',
},
{
id: '3',
name: 'Hospital 3',
state: 'Kedah',
}]
};
}
filterHealthcareState = (state) => {
this.setState({
state: state
});
const newData = this.state.healthcareListSearchHolder.filter(item => {
if (this.state.state === item.state || this.state.state == 'All') {
const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
const textData = this.state.healthcare.toUpperCase();
return itemData.indexOf(textData) > -1;
}
});
this.setState({ healthcareList: newData });
}
render() {
return (
<View style={[styles.container]}>
<Text>Select Location</Text>
<TouchableOpacity style={{ backgroundColor: 'yellow' }}
onPress={() => this.filterHealthcareState('All')}>
<Text>All</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'yellow' }}
onPress={() => this.filterHealthcareState('Johor')}>
<Text>Johor</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'yellow' }}
onPress={() => this.filterHealthcareState('Melaka')}>
<Text>Melaka</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'yellow' }}
onPress={() => this.filterHealthcareState('Kedah')}>
<Text>Kedah</Text>
</TouchableOpacity>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 20, marginHorizontal: 12 }}>
<Text style={[{ fontWeight: '600', fontSize: 16, lineHeight: 22, color: '#555555' }]}>Location: </Text>
<Text style={[{ fontWeight: '600', fontSize: 16, lineHeight: 22, color: '#000000' }]}>{this.state.state}</Text>
</View>
<SafeAreaView style={[styles.healthcareItemListView]}>
<FlatList
data={this.state.healthcareList}
renderItem={({ item }) => <Healthcare id={item.id} name={item.name} state={item.state} />}
keyExtractor={item => item.id}
extraData={this.state}
/>
</SafeAreaView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-start',
flex: 1,
backgroundColor: '#F5F5F5'
},
healthcareItemListView: {
flex: 1,
},
healthcareItemList: {
backgroundColor: '#FFFFFF',
flexDirection: 'row',
flex: 1,
marginVertical: 6,
marginHorizontal: 12,
borderTopWidth: 0.5,
borderLeftWidth: 0.5,
borderRightWidth: 0.5,
borderBottomWidth: 0.8
},
healthcareItemImage: {
width: '30%',
height: 100
},
healthcareItemTextView: {
flex: 1,
justifyContent: 'space-evenly',
marginLeft: 15
}
})
Может кто-нибудь сказать мне, почему это произошло и каково решение? Заранее спасибо