Question

在帖子底部回答 （另请参阅@soutot ANSWER）

我已成功从我的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数据库如下所示： FB DB （我现在忽略了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 } }]

右？

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

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

屏幕上的结果应为： FirstHeader SecondSub

如果有帮助，请告诉我

某些链接可能会解释我在此示例中使用的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

希望有所帮助

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

1 个答案: