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.