Saltar al contenido

Cómo obtener los datos utilizando Reaccionar hooksDec, 20thIn este tutorial, vamos a aprender acerca de cómo hacer las peticiones Ajax en …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo hacer las peticiones Ajax en componentes funcionales mediante creatingour propia costumbre reaccionar gancho.

Reaccionar ganchos son funciones de JavaScript que nos ayudan a uso reaccionan características de los componentes funcionales.

Si usted no sabe acerca de ganchos reaccionan entonces echa un vistazo a tutorial anterior

useFetch encargo reaccionar gancho de

Let crear nuestro propio gancho personalizada llamada useFetch que nos ayuda a recuperar los datos de la API.

Estamos utilizando useState y useEffect ganchos para agregar los métodos del estado y del ciclo de vida de los componentes funcionales.

useState : Se utiliza para agregar el estado de los componentes funcionales.

useEffect : Nos ayuda a utilizar las funciones de ciclo vital de los componentes funcionales como componentDidMount, componentDidUpdate, componentUnmount.

import React,{useState,useEffect} from 'react'

const useFetch = url => {
const [data, setData] = useState(null);
async function fetchData() {
const response = await fetch(url);
const json = await response.json();
setData(json); }

useEffect(() => {fetchData()},[url]); return data;
};

En el código anterior en primer lugar, nos importó useState y useEffect ganchos de la biblioteca ‘reaccionar’.

useState gancho toma un argumento que es el estado inicial y vuelve de nuevo una matriz con dos valuescurrentState y una función que se utiliza para actualizar el estado.

Por defecto useEffect engancha carreras en cada momento en el que un componente se actualiza, pero sólo tenemos que ir a buscar los datos cuando un componente inicialmente monta en el DOM, para detener este comportamiento en useEffect pasamos el segundo argumento una matriz vacía []. el uso de

dejar que nuestros useFetch gancho para hacer una petición del API.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const useFetch = url => {
const [data, setData] = useState(null);

async function fetchData() {
const response = await fetch(url);
const json = await response.json();
setData(json);
}

useEffect(() => {fetchData()},[url]);

return data;
};

function App() {

const data = useFetch("https://jsonplaceholder.typicode.comodos/1");
if (!data) {
return

Loading...

;
} else {
return (

  • {data.id}
  • {data.title}

)
}
}

export default App;

En componente que invoca useFetch gancho al pasar una URL y se vuelve de nuevo la data.It necesita algún tiempo para obtener los datos de la API para que podamos ver el estado de carga si las datais no disponible.

Una vez que los datos están disponibles mostramos los datos reales.

Vamos a añadir el estado de carga al gancho useEffect en lugar de que comprobar manualmente si se dispone de datos o no.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const useFetch = url => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);

async function fetchData() {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false) }

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

return {loading,data};
};

function App() {

const {loading,data} = useFetch("https://jsonplaceholder.typicode.comodos/1");
return (

{loading ?

Loading...

:

  • {data.id}
  • {data.title}

}

)
}

export default App;

También puede comprobar FetchData componente