react-native - 创建可搜索平面列表时，命中未定义不是对象（this.state.text）

Question

我正在尝试创建一个搜索栏来过滤平面列表的数据。在下面的代码中，我创建了一个名称列表并将名称列表传递给 flatlist。然后，我想将搜索栏中的输入传递给 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>
        )
    }
}

标签： react-nativereact-native-flatlist

Answer 1

由于您正在this内部访问，renderHeader因此需要使用正确的范围绑定或调用它。

您可以将调用更改为：

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

或类似的东西：

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