如何在 React Native 中循环所有 Firebase 子项？

Question

在帖子底部回答 （另见@soutot 答案）

我已经成功地从我的Firebase 代码中获得了文本输出，所以我知道它有效。现在我需要循环Firebase 中的所有孩子。来自 swift 的方法是将每个项目存储在 tempObject 上，然后将其附加到数组中。然后，您可以以任何您喜欢的方式简单地使用该数组。这似乎不适用于JavaScript，或者我做错了什么。我现在拥有的功能齐全的 FB 代码是：

componentDidMount(){
    let child = "" 
    var ref = firebase.database().ref("testCategory");

    ref.once("value")
    .then(function(snapshot) {
        child = snapshot.child("test1/testHeader").val() 
        this.setState( {    
            child
        })
    }.bind(this)); 
}

然后我可以在控制台或<Text> 中成功打印此内容。现在，我遇到的问题是循环所有子项，将它们添加到数组中，然后使用该数组显示数据。在我看来，它应该是这样工作的：

componentDidMount(){
    let child = "" 
    var ref = firebase.database().ref("testCategory");

    ref.once("value")
    .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot){
           let tempObject = MyFirebase
           tempObject.testHeader = 
           childSnapshot.val() 

           myArray.append(tempObject) //or .push???
        })
        this.setState( {    //PASSING VARIABLE TO STATE
            child   
        })
    }.bind(this)); //BINDING TO SET STATE
}

我知道这显然是错误的。创建这样的对象甚至都行不通...MyFirebase -class 看起来像这样：

render() {
let testHeader = ""
let testText = ""   
)
}

我的Firebase 数据库如下所示： （我暂时忽略了 subText）

非常感谢所有建议:)

工作代码

 //FIREBASE CODE 
componentDidMount(){
    const ref = firebase.database().ref("testCategory");

    ref.once("value")
    .then(function(snapshot) {
        const categories = []

        //LOOPING EACH CHILD AND PUSHING TO ARRAY
        snapshot.forEach(item => {

            const temp = item.val();
            categories.push(temp);
            return false;
        });

        this.setState( {    //PASSING VARIABLE TO STATE
            child,
            categories
        })
    }.bind(this)); //BINDING TO SET STATE
}

Answer 1

根据您提供的代码，到目前为止它似乎可以工作

var ref = firebase.database().ref("testCategory");

    ref.once("value")
    .then(function(snapshot) {

我说的对吗？

从现在开始，如果您添加一个console.log(snapshot.val())，它可能会打印一个对象数组，如下所示： [ { test1: { testHeader: 'FirstHeader', testText: 'FirstText' } }, { test2: { testHeader: 'SecondSub', testText: 'SecondSub } }]

对吗？

如果是这样，例如，您可以将此快照存储到您的状态中，然后在您的渲染方法中使用此状态。像这样的：

const ref = firebase.database().ref('testCategory');

ref.once('value').then((snapshot) => {
  this.setState({ categories: snapshot.val() });
});

然后在你的渲染方法中：

const { categories } = this.state;

categories.map(category => <Text>{category.testHeader}</Text>)

屏幕上的结果应该是： 第一个标题 二次元

如果这有帮助，请告诉我

一些链接可以解释更多关于我在这个例子中使用的 es6 代码：

数组映射categories.map(...):https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

对象解构const { categories } = this.state:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const 代替 var const ref = ...: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

setState：https://reactjs.org/docs/state-and-lifecycle.html

箭头函数(snapshot) => ...:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

关于 Firebase 快照的一些信息：https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot

希望对你有帮助