Хит undefined не является объектом (this.state.text) при создании поискового плоского списка - PullRequest
Новая
       7

Хит undefined не является объектом (this.state.text) при создании поискового плоского списка

0 голосов
/ 07 января 2020

Я пытаюсь создать панель поиска для фильтрации данных для плоского списка. В приведенном ниже коде я создал список имен и передал список имен в плоский список. Затем я хотел бы передать входные данные из панели поиска в 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>
        )
    }
}

1 Ответ

0 голосов
/ 07 января 2020

Поскольку вы обращаетесь к this внутри renderHeader, его необходимо либо связать, либо вызвать с правильной областью действия.

Вы можете изменить вызов на что-то вроде: 

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

Или что-то вроде: 

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