创建可搜索的平面列表时，未定义命中不是对象(this.state.text)

Question

我正在尝试创建一个搜索栏来过滤平面列表的数据。在下面的代码中，我创建了一个名称列表并将名称列表传递到平面列表中。然后，我想将输入从搜索栏传递给 搜索过滤器函数来过滤数据。问题是当我进入页面时，我遇到了错误"未定义不是对象(评估此.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>
)
}
}

Answer 1

由于您正在访问renderHeader内部的this因此需要绑定或调用正确的作用域。

您可以将呼叫更改为以下内容：

ListHeaderComponent={this.renderHeader.bind(this)}

或类似的东西：

ListHeaderComponent={() => this.renderHeader()}