Soy nuevo en la codificación y el aprendizaje de React Native y Firebase.
Estoy tratando de obtener datos de Firebase Realtime Database mediante la API de Firebase.
class UpdatedItem extends React.Component { state = { loading: false, data: [], page: 1, error: null, fullData: [] } componentDidMount() { this.makeRemoteRequest() } makeRemoteRequest = () => { const { page } = this.state const url = `https://example-default-rtdb.firebaseio.com/dinosaur.json` this.setState({ loading: true }) fetch(url) .then(res => res.json()) .then(res => { this.setState({ data: page === 1 ? [...this.state.data, ...res] : [...this.state.data, ...res], error: res.error || null, loading: false, fullData: res }) }) .catch(error => { this.setState({ error, loading: false }) }) } render() { console.log([...this.state.data])Logré obtener datos de una matriz como se muestra a continuación.
[ { "height" : 2.1, "length" : 12.5, "name" : "lambeosaurus", "weight" : 5000 }, { "height" : 4, "length" : 9, "name" : "stegosaurus", "weight" : 2500 } ](Datos en una matriz)
Array [ Object { "height": 2.1, "length": 12.5, "name": "lambeosaurus", "weight": 5000, }, Object { "height": 4, "length": 9, "name": "stegosaurus", "weight": 2500, }, ](Resultado en la consola)
Pero no pudo recuperar los datos de un objeto.
{ "lambeosaurus" : { "height" : 2.1, "length" : 12.5, "weight" : 5000 }, "stegosaurus" : { "height" : 4, "length" : 9, "weight" : 2500 } }(Datos en un objeto)
Array [](Resultado en la consola)
¿Puedo saber lo que me estoy perdiendo y cómo obtener datos de un objeto, no de una matriz? De forma anticipada, muchas gracias por su ayuda.
La diferencia aquí es que el segundo viene como un objeto, pero aún está usando la desestructuración de la matriz en su setState :
this.setState({ data: page === 1 ? [...this.state.data, ...res] : [...this.state.data, ...res], ... }) ^ este patrón ( [...array, ...array] ) funciona para matrices, por lo que obtienes los datos en la primera. Pero cuando los datos son un objeto, necesita un patrón diferente:
this.setState({ data: page === 1 ? {...this.state.data, ...res} : {...this.state.data, ...res}, ... })^ observe los corchetes: así es como se desestructura un objeto en un nuevo objeto.
Ahora, cuando console.log([...this.state.data]) , no necesita desestructurarlo nuevamente. Si simplemente console.log(this.state.data) , verá que tiene una matriz para el primero y un objeto para el segundo.
Finalmente, debido a que compartió este fragmento de código, también debe saber algo sobre su setState en general: si desea actualizar un estado como este, utilizando el valor anterior como parte de su actualización, querrá acceder al estado anterior desde setState así (usaré el código objeto aquí, pero también funciona para matrices o cualquier otra cosa):
this.setState((previousState) => ({ data: page === 1 ? {...previousState.data, ...res} : {...previousState.data, ...res}, error: res.error || null, loading: false, fullData: res }))