2

Estoy investigando un poco React native.

Estoy consumiendo una api rest propia, pero mi problema viene, al mostrar los datos, no se muy bien como hacerlo, busco un poco lo que sería el equivalente de *ngIf y *ngFor en angular. Alguien me puede ayudar a entenderlo un poco?

 postData() {
  const response =  fetch('**************', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  
})
.then((response) => response.json())
.then((responseJson) => {
  alert(JSON.stringify(responseJson));
  console.log(responseJson);
})
.catch((error) => {
  //Error
  alert(JSON.stringify(error));
  console.error(error);
});

}

1
  • Hola, ¿Tienes feedback? ¿La respuesta fue de utilidad? Saludos
    – g.4
    Commented el 22 feb. 2021 a las 17:43

1 respuesta 1

2

Se presenta un ejemplo mínimo de operación asincrónica con React Native, para consumir un REST API endpoint:

  • Declarar variables de estado para los datos
  • Ejecutar operación asincrónica API
  • Devolver los datos con Native Core Components

Declarar variables de estado para los datos

Se usa el hook useState para crear variables de estado, aqui se va asignar el resultado de la consulta al endpoint de REST API; useState se configura con una variable de estado data, una funcion handler setData y un valor inicial, en este caso se propone una arreglo vacío:

const [data, setData] = useState([]);

Ejecutar operación asincrónica API

Luego, para ejecutar operaciones asincrónicas se usa el hook useEffect, aquí la configuración para que postData solo se dispare una vez (skip effects), al cargar el componente:

useEffect(()=>{
  postData()
},[]);

Después, dentro de la secuencia fetch, en la función de continuacion then, se asignan los datos provenientes de la API, en la variable de estado data, usando la función setData:

.then((responseJson) => {
      //alert(JSON.stringify(responseJson));
      //console.log(typeof responseJson);
      setData(responseJson.results);
    })

Al llamar a setData, se devuelve nuevamente todo el componente (re-render).


Devolver los datos con Native Core Components

Finalmente, se devuelven los datos (render) dentro del método return, aquí se muestra el uso del método map de JS; la función anónima de map se configura con un return implícito, pues el objetivo es devolver los elementos en "Render time".

Suponiendo que el endpoint regresa un array results, dentro del cual hay parámetros como name e image:

return (
      <ScrollView>
      {data.map((element)=>(
        <View>
          <View>
            <Image src={element.image} />
            <Text>{element.name}</Text>
          </View>
        </View>
      ))}
      </ScrollView>
    );

Aqui se usan Native Core Components como ScrollView, View, Image y Text para envolver los datos que se van a mostrar en la User Interface UI dentro del método render, en vez de las etiquetas/elementos DOM, pues son layouts para dispositivos móviles.


Ejemplo

El componente completo puede quedar codificado de la siguiente forma:

import React from 'react';
import { ScrollView , View , Text, Image } from 'react-native';

function App(){
    const [data, setData] = useState([]);
    //URL: la URL de tu endpoint API
    function postData() {
      const response =  fetch(URL, {
      method: 'GET',
      headers: {'Content-Type': 'application/json'}
      }).then((response) => response.json())
    .then((responseJson) => {
      //alert(JSON.stringify(responseJson));
      //console.log(typeof responseJson);
      setData(responseJson.results);
    })
    .catch((error) => {
      //Error
      alert(JSON.stringify(error));
      console.error(error);
    });
    }
  
    useEffect(()=>{
      postData()
    },[]);
  
    //console.log(data);
    return (
      <ScrollView>
      {data.map((element)=>(
        <View>
          <View>
            <Image src={element.image} />
            <Text>{element.name}</Text>
          </View>
        </View>
      ))}
      </ScrollView>
    );
  }

export default App;

Notas de campo

busco un poco lo que sería el equivalente de *ngIf y *ngFor en angular.

  • Nótese que en ReactJS se pueden usar métodos de JS, en este caso en vez de ngFor, se usa map con iterables.

  • Por lo tanto, un if o un operador condicional ternario de JS pueden sustituir a ngIf.

Ejemplos a nivel básico React Native

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.