Effect
Introducció
Section titled “Introducció”useEffect
es un hook de React que te permite sincronizar un componente con un sistema externo.
Obtenir dades
Section titled “Obtenir dades”A React, per utilitzar la funció fetch
ho has de fer amb el “hook” useEffect
.
En aquest exemple obtenim una llista de posts amb la funció fetch
:
import { useEffect, useState } from "react"
export default function App() {
const [posts, setPosts] = useState([])
useEffect(() => { (async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10') const data = await response.json() setPosts(data)
})() }, [])
return ( <div className="container"> <ul className="list-group mt-5"> {posts.map(post => <li className="list-group-item">{post.title}</li>)} </ul> </div> )}
Activitat. Afegeix un missatge d’error:
{% sol %}
import { useEffect, useState } from "react"
export default function App() {
const [currentTime, setCurrentTime] = useState(0) const [log, setLog] = useState("")
useEffect(() => {
const fetchTime = async () => {
const response = await fetch('/api/time') if (response.status != 200) { setLog(response.statusText) return }
const data = await response.json() setCurrentTime(data.time)
}
fetchTime()
}, [])
return ( <div className="container"> <p className="text-center m-5 p-5 fs-3">The current time is {currentTime}.</p> <p className="text-center text-danger fs-4">{log}</p> </div> )}
{% endsol %}
SWR és una biblioteca React Hooks per a l’obtenció de dades.
El nombre “SWR” es derivado de stale-while-revalidate, una estrategia de invalidación de caché HTTP popularizada por HTTP RFC 5861 (opens in a new tab).
SWR es una estrategia para devolver primero los datos en caché (obsoletos), luego envíe la solicitud de recuperación (revalidación), y finalmente entrege los datos actualizados.
Con SWR el componente obtendrá constante y automáticamente el último flujo de datos. Y la interfaz de usuario será siempre rápida y reactiva.
Instal.la swr
:
$ bun add swr
En este ejemplo, el hook useSWR acepta una key que es un cadena y una función fetcher. key es un indentificador único de los datos (normalmente la URL de la API) y pasará al fetcher. El fetcher puede ser cualquier función asíncrona que devuelve datos, puedes utilizar el fetch nativo o herramientas como Axios.
El hook devuelve 2 valores: data y error, basados en el estado de la solicitud.
import useSWR from 'swr'
export default function App() {
return <Countries />}
function Countries() {
// created function to handle API request const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());
const { data, error, isValidating, } = useSWR('https://restcountries.com/v2/all', fetcher)
// Handles error and loading state if (error) return <p className="m-5 text-center fs-3">Failed to load</p>
if (isValidating) return <p className="m-5 text-center fs-3">Loading...</p>
return ( <div> {data.map((country: any, index: number) => ( <img key={index} src={country.flags.png} width={100} /> ))} </div> )}
Activitats
Section titled “Activitats”1.- Mostra la recepta que et mostra aquest enllaç: https://www.themealdb.com/api/json/v1/1/random.php:
{% sol %}
import useSWR from 'swr'
export default function App() {
return ( <div className="container"> <Meal /> </div> )}
function Meal() {
// created function to handle API request const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());
const { data, error, isValidating, } = useSWR("https://www.themealdb.com/api/json/v1/1/random.php", fetcher)
// Handles error and loading state if (error) return <p className="m-5 text-center fs-3">Failed to load</p>
if (isValidating) return <p className="m-5 text-center fs-3">Loading...</p>
const meal = data.meals[0]
return ( <> <h2 className='text-center'>{meal.strMeal}</h2> <img src={meal.strMealThumb} /> <p className="border border-3">{meal.strInstructions}</p> </> )}
{% endsol %}
2.- Mostra alguna informació d’aquest repositori: https://rickandmortyapi.com/documentation
Per exemple, el personatge https://rickandmortyapi.com/api/character/2
{% sol %}
import useSWR from 'swr'
export default function App() {
return ( <div className="container"> <Character /> </div> )}
function Character() {
// created function to handle API request const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());
const { data, error, isValidating, } = useSWR("https://rickandmortyapi.com/api/character/2", fetcher)
// Handles error and loading state if (error) return <p className="m-5 text-center fs-3">Failed to load</p>
if (isValidating) return <p className="m-5 text-center fs-3">Loading...</p>
return ( <> <h2>{data.name}</h2> <p>{data.species}</p> <img src={data.image} /> </> )}
{% endsol %}
- https://www.freecodecamp.org/news/how-to-fetch-api-data-in-react/
- https://dev.to/franklin030601/hacer-un-fetching-de-datos-y-crear-un-custom-hook-4bjh
- https://es.react.dev/reference/react/useEffect#fetching-data-with-effects
- https://overreacted.io/a-complete-guide-to-useeffect/
- https://medium.com/@bhanu.mt.1501/api-calls-in-react-js-342a09d5315f
El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.
©2022-2025 xtec.dev