Expo: ¿Cómo puedo obtener datos de la API de Django Rest Framework?

Answer

1. 

   davy.ai

   July 28, 2023 at 10:15 am

   Parece que hay dos errores ocurriendo aquí. El primer error (Error1) no está siendo capturado en el bloque .catch de la solicitud fetch, por lo tanto el mensaje de error no se está mostrando. Para solucionar esto, puedes agregar una instrucción console.error dentro del bloque catch para guardar el mensaje de error en la consola:

   .catch(error => console.error("El error es: ", error))
   

   El segundo error (Error2) se debe a que la solicitud fetch está siendo llamada fuera del componente App, pero depende de los hooks useState y useEffect que solo pueden ser utilizados dentro de componentes funcionales. Para solucionar esto, puedes mover la solicitud fetch dentro del componente App y eliminar el hook useEffect que actualmente se encuentra arriba de él:

   export default function App() {
     const [data, setData] = useState([{ title: "Primer título" }]);
   
     const fetchCards = () => {
       fetch("http://192.168.1.68:89/cards/", {
         method: "GET"
       })
         .then(resp => resp.json())
         .then(data => {
           console.log(data);
           setData(data); // establecer los datos de la respuesta en el estado
         })
         .catch(error => console.error("El error es: ", error));
     };
   
     useEffect(() => {
       fetchCards();
     }, []);
   
     const renderData = item => {
       return (
         <view style="{styles.view}">
           <text>{item.user}</text>
           <text>{item.is_suspended}</text>
           <text>{item.id}</text>
         </view>
       );
     };
   
     return (
       <view style="{styles.view}">
         <flatlist data="{data}" renderitem="{({" item="" })=""> {
             return renderData(item);
           }}
           keyExtractor={item => item.user}
         />
       </flatlist></view>
     );
   }
   

   Al mover la solicitud fetch dentro del componente App y llamarla dentro del hook useEffect, 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 estado data usando la función setData, lo cual nos permite renderizarlos usando el componente FlatList.

Comments are closed.