Javascript React Native isn'中的平面列表；t从firebase渲染子对象 我想做的事

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

问题 平面列表没有呈现任何内容。我在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});
});
}

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.'

作为字符串的post密钥。 ref只是引用了我的firebase中的posts部分。 呈现平面列表：

 <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>

import React，{Component}来自'React'；
从“react native”导入{FlatList，View，Text}；
从“firebase/app”导入*作为firebase；
类MessageList扩展组件{
建造师（道具）{
超级（道具）；
this.state={firebaseItems:{}；
}
组件willmount（）{
这是getItems（）；
}
getItems=（）=>{
var项目=[]；
firebase.database（）.ref（'/posts'）.orderByKey（）.on（'value'，（snap）=>{
snap.forEach（（子项）=>{
推({
注释：child.val（）.comment，
});
});
this.setState（{firebaseItems:items}）
}，error=>console.log（error））；
};
renderRow=（{item，index}）=>{
返回(
{item.comment}
);
};
render（）{
返回(
);
}
}
导出默认消息列表；

从“React”导入React，{Component}；
从“react native”导入{FlatList，View，Text}；
从“firebase/app”导入*作为firebase；
类MessageList扩展组件{
建造师（道具）{
超级（道具）；
this.state={firebaseItems:{}；
}
组件willmount（）{
这是getItems（）；
}
getItems=（）=>{
var项目=[]；
firebase.database（）.ref（'/posts'）.orderByKey（）.on（'value'，（snap）=>{
snap.forEach（（子项）=>{
推({
注释：child.val（）.comment，
});
});
this.setState（{firebaseItems:items}）
}，error=>console.log（error））；
};
renderRow=（{item，index}）=>{
返回(
{item.comment}
);
};
render（）{
返回(
);
}
}
导出默认消息列表；

数据

和

渲染图

是平面列表的属性。把它们放在你的平面列表标签里。@Adam Kipins我不明白你的意思。我确实把它们放在我的平面列表标签上了。我不知道它是否出现在上面的代码中，但我仔细检查了一下，现在它显示它们在标记中。在将道具传递给标记之前，您正在关闭标记。@FacundoMatteo我不明白我做错了什么。我应该将标记移动到哪里？@GIISE您有

data=…

当它应该是

data

和

renderItems

是平面列表的属性。把它们放在你的平面列表标签里。@Adam Kipins我不明白你的意思。我确实把它们放在我的平面列表标签上了。我不知道它是否出现在上面的代码中，但我仔细检查了一下，现在它显示它们在标记中。在将道具传递给标记之前，您正在关闭标记。@FacundoMatteo我不明白我做错了什么。我应该把标签移到哪里？@GIISE你有

数据=…

什么时候应该是

嗯。。。它不起作用。我认为问题在于getItems（）；函数而不是平面列表。我认为我没有正确获取数据，但我不知道出了什么问题。似乎是item.content.length导致了问题。我能够让你的代码正常工作（硬编码了一些我在我的状态下没有的东西，但是你应该能够调整我的版本）。用我的版本更新了答案。另外，请确保您在Firebase中设置了读取数据的正确权限。嗯。。。它不起作用。我认为问题在于getItems（）；函数而不是平面列表。我认为我没有正确获取数据，但我不知道出了什么问题。似乎是item.content.length导致了问题。我能够让你的代码正常工作（硬编码了一些我在我的状态下没有的东西，但是你应该能够调整我的版本）。用我的版本更新了答案。另外，请确保您在Firebase中设置了读取数据的正确权限。

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;