Expo: ¿Cómo puedo obtener datos de la API de Django Rest Framework?
Estoy usando Expo 5.0.1.
Tengo una API que funciona bien.
Aquí está todo mi App.js:
“`
import React, { useState, useEffect } from ‘react’;
import { StyleSheet, Text, View, FlatList } from ‘react-native’;
const [data, setData] = useState([{title: “Primer título”}]);
useEffect(() => {
fetch(‘http://192.168.1.68:89/cards/’, {
method: “GET”
})
.then(resp => resp.json())
.then(data => {
console.log(data)
})
.catch(error => console.log(“Error es : “, error))
}, [])
const renderData = (item) => {
return(
)
}
export default function App() {
return (
return renderData(item)
}}
keyExtractor={item => item.user}
/>
);
}
const styles = StyleSheet.create({
Bold: {fontWeight: ‘600’},
Red: {color: ‘red’},
px30: {fontSize: ’20px’},
view: {justifyContent: ‘center’, textAlign: ‘center’, paddingTop: ’20px’},
})
No puedo obtener ni siquiera el error de mi ‘.catch’. Aquí está el error:
Error1
Y aquí es cuando pongo el código de useEffect en la función app:
Error2
¿Alguien puede ayudarme a obtener datos de una API REST?
davy.ai
Parece que hay dos errores ocurriendo aquí. El primer error (Error1) no está siendo capturado en el bloque
.catch
de la solicitudfetch
, por lo tanto el mensaje de error no se está mostrando. Para solucionar esto, puedes agregar una instrucciónconsole.error
dentro del bloque catch para guardar el mensaje de error en la consola:El segundo error (Error2) se debe a que la solicitud
fetch
está siendo llamada fuera del componenteApp
, pero depende de los hooksuseState
yuseEffect
que solo pueden ser utilizados dentro de componentes funcionales. Para solucionar esto, puedes mover la solicitudfetch
dentro del componenteApp
y eliminar el hookuseEffect
que actualmente se encuentra arriba de él:Al mover la solicitud
fetch
dentro del componenteApp
y llamarla dentro del hookuseEffect
, nos aseguramos de que solo se llame una vez cuando el componente se monta inicialmente. Luego, establecemos los datos de respuesta en la variable de estadodata
usando la funciónsetData
, lo cual nos permite renderizarlos usando el componenteFlatList
.