React Native中的FlatList不会从Firebase渲染子级

Question

What I am Trying to do

I am trying to add comments to a very basic social media app I am creating, by referencing the post that they want to comment to by key, and then having the user push their comments to the post as children. Then, I will use a flatlist to render all of the comments.

Problem

The FlatList is not rendering anything. I checked on firebase, and the comments are there, but when I try to run the flatlist, nothing renders. I would love some help getting the FlatList to render!

My Code

Getting the comments from 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 being the key for the post as a string. ref is just referencing the posts section in my firebase. Rendering the 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>

And the layout of my firebase:

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;