Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo mostrar datos de API usando React.js

 

En este tutorial de React, seguiremos construyendo sobre el formulario de React del último tutorial. Ahora queremos poder obtener datos de una API y trabajar con esos datos de manera significativa. Para hacer esto, necesitaremos hacer uso de una matriz para administrar el estado en el nivel superior de la aplicación en el componente Aplicación. Luego configuraremos un par de otros componentes y compartiremos el estado con ellos a través del objeto props. React actualizará la interfaz de usuario automáticamente a medida que agreguemos nuevos objetos de datos a nuestra matriz de estado. Veamos cómo construir esto ahora.


Entrada de datos de usuario

Ya tenemos un Formulario configurado para que un usuario pueda ingresar el nombre de una empresa y luego hacer clic en Ir. En ese momento, se realiza una solicitud de API a la API de descanso de Github y recuperamos los datos. ¿Cómo podemos aprovechar esos datos? Eso es lo que veremos aquí. En este punto tenemos este formulario que vemos aquí.
formulario de reacción para obtener datos de la API

Cada vez que un usuario escribe el nombre de una empresa, obtenemos una respuesta de la API. Entonces, lo primero que necesitamos es crear una matriz que contenga la información que obtenemos de la API. De esa manera, cada vez que se agrega un nuevo nombre de empresa, podemos agregar un objeto de respuesta a la matriz. Este es el companyinfoarrayAdemás, necesitamos una función que agregue cada objeto a la matriz cada vez que el usuario ingrese información en el formulario y haga clic en Ir. Esta es la addCompany()función.

Lo que estamos haciendo aquí es poner companyinfoel estado del componente de la aplicación . Este objeto se agrega a la matriz de objetos almacenados en companyinfoarrayel estado. La setStatefunción nos ayuda aquí ya que esta es la función que necesitamos para cambiar el estado de un componente de la clase React. Pasamos una función a setState () que da acceso al estado anterior, y lo que devuelve esta función se convierte en el nuevo estado. Podemos regresar companyinfoarraydonde se usa el operador de propagación para agregar el nuevo companyinfoEsto es equivalente a realizar una operación concat en la companyinfoarraymatriz. Ahora podemos usar React Dev Tools para verificar si esto está funcionando.

¡Excelente! Cada vez que el usuario escribe el nombre de una empresa y hace clic en Ir, podemos ver en React Dev Tools que se companyinfoarrayestá completando correctamente. En otras palabras, cada vez que obtenemos una respuesta de la api de Github, almacenamos ese objeto de respuesta directamente en el estado de la aplicación React.


Creación de un componente de lista de empresas

Nuestro objetivo es mostrar todos los objetos de datos que estamos almacenando en companyinfoarrayel estado. Podemos hacer esto creando un componente React cuyo trabajo principal es mostrar otros componentes. En otras palabras, necesitamos un componente que cree una lista de componentes. Podemos comenzar con este código aquí.

También usamos CSS simple para ayudar con la visualización de los componentes en la página.

Esto nos da nuestro componente Formulario y el componente CompanyList . Los diferentes contornos de color solo ayudan con la visualización.
componente de lista de reacciones


Pasar el estado del componente de la aplicación al componente CompanyList

En la captura de pantalla anterior, tenga en cuenta que el componente CompanyList está seleccionado en React Dev Tools. En el panel de información que nos muestra que no hay Props asociados con ese componente. Bueno, necesitamos el componente CompanyList para tener acceso al companyinfoarrayestado. Eso significa que tenemos que pasarlo como un accesorio.

Ahora, cuando usamos React Dev Tools con el componente CompanyList resaltado, podemos ver que el componente ahora tiene acceso a los datos que necesitamos. De hecho, cuando escribimos para agregar algunas empresas nuevas a la matriz, nuestra matriz se actualiza inmediatamente en el componente CompanyList . ¡Muy genial!


Componente de un solo artículo

Necesitamos un componente más para que la aplicación funcione. Este será el componente Compañía y su trabajo es mostrar una sola compañía. Así que comencemos con este código aquí para el componente Compañía .


Renderizando un componente dentro de otro componente

Entonces, el propósito del componente Compañía anterior es que podamos renderizarlo utilizando el componente CompanyList . En el código resaltado a continuación, usamos la función de mapa para ejecutar una función contra cada elemento en el companyinfoarrayLo que esto hace por nosotros es representar un nuevo componente Company dentro del componente CompanyList cada vez que se agrega una nueva respuesta API a la matriz.

Ahora probamos la aplicación y podemos ver los diferentes componentes trabajando juntos para renderizar los datos.


Cómo mostrar datos de API usando React.js Resumen

En este tutorial creamos un par de componentes de React para mostrar datos de una API. El componente Company se utiliza para representar datos sobre una empresa, mientras que el componente CompanyList se utiliza para convertir una matriz de objetos en una matriz de componentes de la empresa. El componente de formulario lee la entrada del usuario, mientras que el componente de aplicación de nivel superior mantiene todo junto y gestiona la relación entre todos los demás componentes. El elemento de estado companyinfoarray se encuentra en el componente de aplicación de nivel superior. De esta manera, podemos compartir datos entre múltiples componentes y nos permitió agregar nuevos datos de respuesta de API a la interfaz de usuario simplemente agregando la respuesta de API de GitHub a ese elemento de estado. En el componente Form, exploramos cómo leer desde un elemento de entrada usando el estado de React con la ayuda de un evento onChange.



Publicar un comentario

0 Comentarios