Guía para recuperar y mostrar datos de API en React JS

Publicado: 2024-10-01

Obtener y mostrar datos de una API es una tarea fundamental en las aplicaciones React modernas. Con la evolución de React, la recuperación de datos se ha vuelto más ágil y ofrece múltiples métodos para realizar solicitudes HTTP. En esta guía, cubriremos los pasos para recuperar y mostrar datos usando React.

Tabla de contenido

Palanca

Configurando el proyecto React

Antes de sumergirse en la recuperación de API, asegúrese de tener un proyecto React configurado. Puedes crear uno usando

  • npx create-react-app my-app
    cd my-app
    npm start

Esto inicializa un nuevo proyecto de React y ejecuta un servidor de desarrollo.

️ Paso a paso: Obteniendo datos en React

1. Crear estado para almacenar datos

Utilice el gancho useState para crear una variable de estado para almacenar los datos recuperados.

javascript

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

2. Obtenga datos de API con useEffect

El gancho useEffect de React garantiza que la recuperación de datos se realice cuando se monte el componente. La función fetch() se utiliza para recuperar datos de la API.

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. Mostrar los datos obtenidos

Una vez que se obtienen los datos, se pueden representar en JSX usando el método map() :

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ Uso de Axios para obtener datos

Aunque fetch() es la API nativa del navegador, muchos desarrolladores prefieren usar bibliotecas como Axios debido a su simplicidad y potentes funciones. A continuación se muestra un ejemplo del uso de Axios:

Instalar Axios :

  • npm install axios

Obteniendo datos

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ Manejo de casos extremos

  • Estados de carga : es importante gestionar un estado de carga mientras se recuperan los datos.
  • Manejo de errores : implementar un manejo de errores adecuado puede mejorar la experiencia del usuario.

Ejemplo:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

Conclusión

Obtener y mostrar datos de las API en React es esencial para crear aplicaciones web dinámicas. Ya sea que se utilice la API fetch() o una biblioteca como Axios, el proceso implica definir un estado para almacenar datos, realizar la solicitud y representar los resultados. Al comprender estos pasos y manejar casos extremos como la carga y los errores, puede crear aplicaciones receptivas basadas en datos de manera eficiente.

Preguntas frecuentes

1. ¿Cómo configuro un proyecto de React para comenzar a obtener datos de API?

Para configurar un proyecto de React, ejecute los siguientes comandos:

npx create-react-app my -app
cd my -app
npm start

Esto inicializa el proyecto e inicia un servidor de desarrollo.

2. ¿Cómo almaceno los datos recuperados en React?

Puede almacenar datos recuperados utilizando el gancho useState . Ejemplo:

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

3. ¿Cómo puedo recuperar datos en React cuando se monta el componente?

Utilice el gancho useEffect para recuperar datos cuando el componente esté montado:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. ¿Cuál es el propósito de utilizar el método map() en React al representar datos?

El método map() se utiliza para recorrer la matriz de datos recuperada y representar cada elemento en JSX. Por ejemplo:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. ¿Por qué debería utilizar Axios en lugar de la API de recuperación?

Muchos desarrolladores prefieren Axios porque simplifica las solicitudes HTTP, ofrece más funciones y admite navegadores más antiguos de manera más consistente.

6. ¿Cómo instalo Axios en mi proyecto React?

Para instalar Axios, ejecute:

npm install axios

7. ¿Cómo obtengo datos usando Axios en React?

Con Axios, puedes recuperar datos como este:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. ¿Cómo puedo manejar los estados de carga al recuperar datos en React?

Puede administrar los estados de carga creando una variable loading con useState . Por ejemplo:

const [loading, setLoading] = useState ( true );

utilizarEfecto ( () => {
buscar ( 'https://api.example.com/data' )
. entonces ( respuesta => respuesta.json ())
. entonces ( datos => {
setData (datos);
setLoading ( falso );
});
}, []);

9. ¿Cómo manejo los errores al recuperar datos?

Para manejar errores, defina un estado error y actualícelo en caso de que falle la solicitud:

const [error, setError] = useState ( null );

utilizarEfecto ( () => {
buscar ( 'https://api.example.com/data' )
. atrapar ( error => {
establecerError (error);
setLoading ( falso );
});
}, []);

10. ¿Por qué es importante manejar casos extremos como la carga y los errores en la recuperación de API?

El manejo de casos extremos, como la carga y los errores, garantiza que los usuarios estén informados sobre el estado actual de la recuperación de datos y proporciona una experiencia de usuario más fluida en los casos en que la recuperación de datos falla o lleva tiempo.