¿Cómo hago un bucle de todos los niños de Firebase en React Native?

¿Cómo hago un bucle de todos los niños de Firebase en React Native?

RESPUESTA AL FINAL DE LA PUBLICACIÓN (VER TAMBIÉN @soutot RESPONDER)

Obtuve con éxito la salida de texto de mi código Firebase y sé que funciona. Ahora necesito hacer un bucle con todos los niños en Firebase. Viniendo de Swift, la forma de hacerlo es almacenar cada elemento en un tempObject y luego agregarlo a una matriz. Luego, simplemente puede usar esa matriz de la forma que desee. Esto no parece funcionar con JavaScript, o estoy haciendo algo mal. El código de FB totalmente funcional que tengo ahora es:

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

Entonces puedo imprimir esto con éxito en la consola o en <Text>. Ahora, el problema que tengo es hacer un bucle de todos los niños, agregarlos a una matriz y luego usar esa matriz para mostrar los datos. En mi cabeza, así es como debería funcionar:

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
}

Sé que esto obviamente está mal. Crear un objeto como ese ni siquiera funciona... MyFirebase -class se ve así:

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

Mi base de datos Firebase se ve así: FB DB (Ignoré el subtexto por ahora)

Todas las sugerencias son muy apreciadas :)

CÓDIGO DE FUNCIONAMIENTO

 //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
}
Mostrar la mejor respuesta

En el caso de Realtime Database, los datos se almacenan como JSON, por lo que su pregunta parece ser: cómo iterar recursivamente sobre un objeto.

Según el código que proporcionó, parece que funciona hasta este punto

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

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

¿Estoy en lo cierto?

Desde este punto, si agrega un console.log(snapshot.val()), podría imprimir una matriz de objetos, algo como esto: [ { test1: { testHeader: 'FirstHeader', testText: 'FirstText' } }, { test2: { testHeader: 'SecondSub', testText: 'SecondSub } }]

¿Verdad?

Si es así, puede, por ejemplo, almacenar esta instantánea en su estado y luego consumir este estado en su método de representación. Algo como esto:

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

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

Luego, en su método de renderizado:

const { categories } = this.state;

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

El resultado en su pantalla debería ser: Primer encabezado Segundo Sub

Déjame saber si esto ayudó

Algunos enlaces que podrían explicar más sobre los códigos es6 que utilicé en este ejemplo:

mapa de matriz categories.map(...): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

desestructuración de objetos const { categories } = this.state: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

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

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

función de flecha (snapshot) => ...: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Algo sobre instantáneas de Firebase: https://firebase.google. com/docs/reference/js/firebase.database.DataSnapshot

Espero que ayude

Muchas gracias por su ayuda. No conseguí que funcionara del todo, ya que la matriz tendía a almacenar datos JSON en lugar de variables de matriz, si eso tiene sentido. Tal vez entendí mal alguna parte de tu publicación. De todos modos, tu publicación me ayudó mucho y lo hice bien usando forEach. Mira mi publicación arriba. :)

Genial, es bueno saber que podrías manejarlo. Mirando su código, podría tener un pequeño problema en el futuro. JS funciona sincronizado, si tiene una gran lista de elementos, su código podría llamar a setState antes de que su forEach recorra todos sus elementos. Tal vez necesites que sea asíncrono. Para hacerlo, debe usar async/await para decirle a su código que espere hasta que termine forEach para luego ir al siguiente paso. Algo como: .then(async function(snapshot) (...) await snapshot.forEach (...) Docs: desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Gracias por la información, definitivamente lo tomaré en cuenta! :)