Я пытаюсь создать панель поиска для фильтрации данных для плоского списка. В приведенном ниже коде я создал список имен и передал список имен в плоский список. Затем я хотел бы передать входные данные из панели поиска в searchFilterFunction для фильтрации данных. Проблема заключается в том, что при входе на страницу я обнаружил ошибку «Не определено не является объектом (оценивает this.state.text). Хотелось бы узнать причину и решение для этого случая.
const DATA = [
{
name: 'Name 1',
}, {
name: 'Name 2',
}, {
name: 'Name 3',
}, {
name: 'Name 4',
}, {
name: 'Name 5',
},
];
export default class NameListView extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
loading: false,
text: '',
};
this.searchFilterFunction = this.searchFilterFunction.bind(this);
}
searchFilterFunction (text) {
const newData = DATA.filter(function(item) {
const itemData = `${item.name}`;
const textData = text;
return itemData.indexOf(textData) > -1;
});
this.setState({
text: newData
});
};
renderSeparator(){
return <View style={styles.separator}/>
}
renderHeader() {
return (
<SearchBar
placeholder="Choose Recipient"
lightTheme
round
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.text}
/>
);
};
render() {
return (
<SafeAreaView>
<View>
<FlatList style={styles.flatList}
data={DATA}
renderItem={({ item }) =>
<ListItem
title={item.name}
chevron={{color : 'black'}}
leftIcon={<FontAwesome name={'user-circle'} size={25} color=
{'#E3E3E3'}/>}
/>
}
keyExtractor={item => item.name}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
stickyHeaderIndices={[0]}
/>
</View>
</SafeAreaView>
)
}
}