从状态检索的数据不显示在 FlatList 中答案

【问题标题】：Data retrieved from state not display in FlatList从状态检索的数据不显示在 FlatList 中
【发布时间】：2019-08-29 01:47:15
【问题描述】：

我在将数据从 firebase 渲染到 FlatList 组件时遇到问题。

只有在将数组硬编码到数据属性中时，才能成功渲染 FlatList。当我通过状态 FlatList 传递数据时，不会呈现任何内容。

任何帮助将不胜感激。

loadBooks = () => {
    this.setState({
    refreshing: true,
    book_feed: []
    });

    var that = this;

    database
        .ref('books')
        .once('value')
        .then(function(snapshot) {
        const exists = snapshot.val();        
        if (exists) data = snapshot.val();
        for (var book in data) {
            var bookObj = data[book];
            that.state.book_feed.push({
                id: book,
                name: bookObj.name,
                url: bookObj.image,
                price: bookObj.price
            });
        }        
        })
        .catch(error => console.log(error));

    that.setState({
        refreshing: false,
        loading: false
    });
};

loadNew = () => {
    this.loadBooks();
};

componentDidMount() {
    this.loadNew();    
}

render() {
    <View>
        {this.state.loading == true ? (
            <Text>Loading...</Text>) : (
        <FlatList
            refreshing={this.state.refreshing}
            onRefresh={this.loadNew}
            data={this.state.book_feed}
            renderItem={({ item }) => 
            <Text style={{ flex: 1 }}>{item.name}</Text>}
        />)}      
    </View>
}

【问题讨论】：

标签： reactjs react-native firebase-realtime-database

【解决方案1】：

您直接修改了state，这是一种错误的代码做法。

正确的代码如下所示：

let book_feed = [];
database
        .ref('books')
        .once('value')
        .then(function(snapshot) {
        const exists = snapshot.val(); 
        //let data = [];  define data if not defined.     
        if (exists) data = snapshot.val();
        for (var book in data) {
            var bookObj = data[book];
            book_feed.push({
                id: book,
                name: bookObj.name,
                url: bookObj.image,
                price: bookObj.price
            });
        }        
        })
        .catch(error => console.log(error));

    that.setState({
        book_feed,
        refreshing: false,
        loading: false
    });

【讨论】：