Reactjs 从状态检索的数据不显示在平面列表中

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

只有在将数组硬编码到data属性中时，我才能成功呈现平面列表。当我通过state传递数据时，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>
}

loadBooks=（）=>{
这是我的国家({
令人耳目一新：是的，
图书提要：[]
});
var=这个；
数据库
.ref（“书籍”）
.once（'值'）
.then（功能（快照）{
const exists=snapshot.val（）；
如果（存在）数据=snapshot.val（）；
用于（数据中的var帐簿）{
var bookObj=数据[账簿]；
那。州。图书供给。推({
id:书，
名称：bookObj.name，
url:bookObj.image，
价格：bookObj.price
});
}        
})
.catch（错误=>console.log（错误））；
那是一个州({
刷新：错，
加载：错误
});
};
loadNew=（）=>{
这是loadBooks（）；
};
componentDidMount（）{
这是loadNew（）；
}
render（）{
{this.state.loading==true(
加载…：(
{item.name}
/>)}      
}

您直接改变了

状态

，这是一种错误的代码实践

正确的代码如下所示：

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
    });