La mayoría de las aplicaciones que creamos hoy consumen datos de fuentes externas a través de API. Obtienen datos de un servidor y los muestran en su interfaz de usuario.
Con React, puede crear un enlace personalizado para obtener datos de una API. Dada una URL, este enlace devolverá un objeto que contiene los datos y un mensaje de error opcional. Luego puede usar este gancho en un componente.
Creación de un gancho de reacción personalizado
Comience creando un nuevo archivo llamado useFetch.js. En este archivo, cree una función llamada useFetch() que acepte una cadena de URL como parámetro.
constante useFetch = (url) => {
}
El gancho debe hacer la llamada a la API inmediatamente después de que se llama. Puedes usar el gancho useEffect() para esto.
Para las llamadas a la API reales, utilice la API de obtención. Esta API es una interfaz basada en promesas que le permite realizar solicitudes y recibir respuestas a través de HTTP de forma asíncrona.
En el gancho personalizado useFetch(), agregue lo siguiente.
importar { usarEfecto, usarEstado } de "reaccionar";constante useFetch = (url) => {
constante [datos, setdata] = useState(nulo);
constante [cargando, setcargando] = useState(verdadero);
const [error, establecer error] = useState("");usarEfecto(() => {
buscar (url)
.entonces((res) => res.json())
.entonces((datos) => {
seterror(datos.error)
establecer datos(datos.broma)
setloading(falso)
})
}, [dirección]);devolver {datos, cargando, error};
};
exportardefecto useFetch;
En este gancho, primero estás inicializando el estado de tres valores:
- datos: contiene la respuesta de la API.
- error: contiene un mensaje de error si se produce un error.
- cargando: contiene un valor booleano que indica si ha obtenido los datos de la API. Inicialice el estado de carga en verdadero. Una vez que la API devuelve datos, configúrelos en falso.
El gancho useEffect() toma la cadena de URL como argumento. Esto es para garantizar que se ejecute cada vez que cambie la URL.
La función useFetch() devolverá un objeto que contiene los datos, la carga y los valores de error.
Usar un gancho personalizado de React
Para usar el gancho personalizado useFetch() que acaba de crear, comience por importarlo:
constante usarFetch = requerir("./usarFetch")
Luego úsalo de la siguiente manera:
constante {datos, cargando, error} = useFetch (url)
Para demostrarlo, considere el siguiente componente Chistes:
constante Chistes = () => {
URL constante = "<https://sv443.net/jokeapi/v2/joke/Programming? tipo=único>";
constante {datos, cargando, error} = useFetch (url);si (cargando) devolver (
<división>Cargando...</div>
)devolver (
<división>
{error &&<división>{error}</div>}
{datos &&<división>{<división>{datos}</div>}</div>}
</div>
);
};
exportardefecto chistes;
Llama al gancho useFetch() con la URL de la API de chistes y recibe los datos, la carga y los valores de error.
Para renderizar el componente Jokes, primero verifique si Loading es verdadero. Si es así, muestre una declaración de "Cargando ..."; de lo contrario, presente los datos y el mensaje de error, si corresponde.
¿Por qué usar ganchos de reacción personalizados?
Así como usó el gancho personalizado useFetch() en este componente, puede volver a usarlo en otros componentes. Esa es la belleza de externalizar la lógica en ganchos en lugar de escribirla en cada componente.
Los ganchos son una característica poderosa de React que puede usar para mejorar la modularidad de su código.
