从 Firebase 实时数据库中获取平面列表中的数据答案

【问题标题】：Fetch data in flat list from Firebase Real Time Database从 Firebase 实时数据库中获取平面列表中的数据
【发布时间】：2019-11-06 19:00:14
【问题描述】：

我有一个数据结构，我想获取并显示在平面列表中，这是我的数据。

-Lt10FlMt0xtru36Ztmb
                  name : "Hello"
-Lt0pdC5Ikwd-ZWNBiYJ
                  name : "Coke"
-Lt0paPi_-zkCelfoisM
                  name : "Pespsi"

这是我的代码：

  readUserData = () => {

        firebase.database().ref('Brands/').once('value').then((snapshot) => {
            console.log(snapshot.val())
            const userdata = snapshot.val();

            //  Alert.alert("Helo" , userdata);
            this.setState({
              getListbrands : userdata

            })
            Alert.alert("Data" , JSON.stringify(this.state.getListbrands))


        });

    }

这里我在平面列表中设置数据但它没有显示任何东西请指导。

{
  this.state.getListbrands &&
  <FlatList
  data={this.state.getListbrands}
  keyExtractor={(a, b) => b.toString()}
  renderItem={({ item }) => (
    <Text style={{color:'#000'}}>{item.name}</Text>
  )}

/>
}

【问题讨论】：

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

【解决方案1】：

根据文档，FlatList component 需要一个 array 数据。快照的值是一个对象，而不是一个数组。

如果您想使用每个子节点的值的数组，您可以通过以下方式获得：

firebase.database().ref('Brands/').once('value').then((snapshot) => {
    userdata = [];
    snapshot.forEach((child) {
        userdata.push(snapshot.val());
    })
    ...

然后您可以将此数组设置为FlatList。

【讨论】：

什么不起作用？请记住，Stack Overflow 是一个非常低效的调试器，因此要获得最佳帮助，请务必准确告诉我们在调试器中运行代码或添加大量日志语句时会发生什么。
这可以使用 .once，但我的理解是，正如名称所述，它只会提取一次数据......但是 .on 返回一些不同的东西，这种方法不起作用，你怎么看？

【解决方案2】：

{
  this.state.getListbrands &&
  <FlatList
  data={this.state.getListbrands}
  keyExtractor={(a, b) => b.toString()}
  renderItem={(item) => (
    <Text style={{color:'#000'}}>{item.name}</Text>
  )}

/>
}

像这样改变。我认为这里的 item 不是对象。请尝试。它会起作用的。谢谢。

【讨论】：