React Native中的FlatList不会从firebase渲染子项

Question

我正在尝试做什么

我正在尝试为我正在创建的非常基本的社交媒体应用添加评论，通过引用他们想要通过密钥评论的帖子，然后让用户将他们的评论作为孩子推送到帖子。然后，我将使用一个平面列表来呈现所有评论。

的问题

FlatList不呈现任何内容。我检查了firebase，并且评论在那里，但是当我尝试运行平面列表时，没有任何渲染。我希望有一些帮助让FlatList呈现！

我的代码

从firebase获取评论：

getItems(){
var items = [];
var query = ref.child(this.state.passKey).orderByKey();
query.once ('value', (snap) => {
  snap.forEach ( (child) => {       
   items.push({
     comment: child.val().comment,
 });
 });
}).then(() => {
    this.setState({firebaseItems: items});
});
}

passKey是帖子作为字符串的键。 ref只是引用我的firebase中的posts部分。 渲染FlatList：

 <FlatList>
    data = {this.state.firebaseItems}
renderItem={({ item, index }) => 
 <View>
            <View style={{width: parseInt(this.state.postWidth), height: ((item.content.length/3)*2 + 60), backgroundColor: '#ffffff',  alignItems: 'center', justifyContent: 'center', paddingLeft: 10, paddingRight:10, borderRadius:5}}>
        <Text style={{fontSize: 18, color: '#000000', textAlign: 'center'}}>
                    { item.comment }
                </Text>
            </View>
      <View style={{width: 1, height: 4, backgroundColor: '#e8e8e8'}} />
   </View>
  }
</FlatList>

我的火力基地的布局：

posts:
  -Kzrip74SH7430djfS:
     content: 'This is a post. Above me is a random key example'
     -KzGh589sjSJfjjds:
        comment: 'this is a comment example. The key for the comment is nested at the same level as the content.'
     -Kz5ghSr8uerSvjrnd:
        comment: 'this is another comment.'
  -Kzwehhherhwpgi:
     content: 'this is another post.'

Answer 1

import React, { Component } from 'react';
import { FlatList, View, Text } from 'react-native';
import * as firebase from 'firebase/app';

class MessageList extends Component {
  constructor(props) {
    super(props);
    this.state = { firebaseItems: {} };
  }

  componentWillMount() {
    this.getItems();
  }

  getItems = () => {
    var items = [];

    firebase.database().ref('/posts').orderByKey().on('value', (snap) => {
      snap.forEach((child) => {
        items.push({
                     comment: child.val().comment,
                   });
      });
      this.setState({firebaseItems: items})
    }, error => console.log(error));
  };

  renderRow = ({item, index}) => {
    return (
        <View style={{
          width: 100,
          height: ((item.length / 3) * 2 + 60),
          backgroundColor: '#ffffff',
          alignItems: 'center',
          justifyContent: 'center',
          paddingLeft: 10,
          paddingRight: 10,
          borderRadius: 5
        }}>
          <Text style={{
            fontSize: 18,
            color: '#000000',
            textAlign: 'center'
          }}>
            {item.comment}
          </Text>
        </View>
    );
  };

  render() {
    return (
        <FlatList data={this.state.firebaseItems}
                  renderItem={this.renderRow}/>
    );
  }
}

export default MessageList;