React-native search bar - error: undefined is not a function (near '... this.state.books.filter...')

Question

我不知道我做错了什么。

我添加了一个搜索栏，但是当我在文本字段中写东西时，出现错误："undefined is not a function (near '... this.state.books.filter...')"

下面是我的一些代码。

我做错了什么？

 state = {
    books: {},
};
componentDidMount() {
        firebase
        .database()
        .ref('/Books')
        .on('value', snapshot => {
            this.setState({ books: snapshot.val() });
        });
}
searchBooks = value => {
    const { books } = this.state;
    const bookArray = Object.values(books);
    const filteredBooks = bookArray.filter(book => {
        let bookLowercase = (book.bookname).toLowerCase();
        let searchTermLowercase = value.toLowerCase();
        return bookLowercase.indexOf(searchTermLowercase) > -1;
    });
    this.setState({ books: filteredBooks });
};

render() {
    const { books } = this.state;
    if (!books) {
        return null;
    }
    const bookArray = Object.values(books);
    const bookKeys = Object.keys(books);
    return (

        <View style={styles.container}>
            {/*Searchbar */}
            <View style={{ height: 80, backgroundColor: '#c45653', justifyContent: "center", paddingHorizontal: 5 }}>
                <View style={{ height: 50, backgroundColor: 'white', flexDirection: 'row', padding: 5, alignItems: 'center' }}>
                    <TextInput
                        style={{
                            fontSize: 24,
                            marginLeft: 15
                        }}
                        placeholder="Search"
                        onChangeText={value => this.searchBooks(value)}
                    />
                </View>
            </View>

            <FlatList
                style={{ backgroundColor: this.state.searchBarFocused ? 'rgba(0,0,0,0.3)' : 'white' }}
                data={bookArray}
                keyExtractor={(item, index) => bookKeys[index]}
                renderItem={({ item, index }) => (
                    <BookListItem
                        book={item}
                        id={bookKeys[index]}
                        onSelect={this.handleSelectBook}
                    />
                )}
            />
        </View>
    );

Answer 1

您正在将 this.state.books 初始化为 Object。

state = {
    books: {},
};

对象没有过滤功能。您可能想改用 Array。

state = {
    books: [],
};

然后您就可以将 this.state.books.filter() 与数组的 filter 函数一起使用。