Cómo recrear el estado de un componente de React

Escenario

Tenemos una aplicación web usando React 15.6.2. Todo va bien hasta que un nuevo módulo para una nueva funcionalidad requiere una versión >= 16.3. El problema es que al actualizar la biblioteca de programación otro módulo dejó de funcionar.

Problema

El modulo que dejó de funcionar consistía en una serie de combos que se generan dinámicamente según el valor escogido en el combo precedente. Por ejemplo, en el primero tienes una lista de continentes. Si eliges «Europa» en el siguiente combo se cargarán los países de dicho continente. Cada combo es un componente de React que se va a añadiendo a un variable incluida en el DOM devuelto por el método render de la clase. Cuando se dispara el evento onChange de uno de los componentes, se descargan los datos pertinentes para generar otro componente a añadir a la variable con el array de componentes y, hasta la susodicha actualización, aparecía en pantalla el nuevo combo. Ahora no aparecía el siguiente combo, tampoco saltaba ningún error y pude comprobar que el array de combos se estaba llenando correctamente. Daba la sensación de que no se estaba recreando el estado que disparaba la renderización del componente.

Solución

Tras intentar varias tentativas complejas e infructuosas, algunas de las cuales implicaban forzar el cambio de estado del padre desde el componente hijo, o el uso de getDerivedStateFromProps() para detectar los cambios en las propiedades del componente y forzar la actualización del DOM, di con un artículo de un blog de reactjs.org que abrió me los ojos. El título del artículo es Probablemente no necesites estado derivado y, efectivamente, bastaba añadir una propiedad key al elemento padre devuelto por el método render para que el componente volviera a recrear el DOM.

Publicaciones Similares

  • React select async

    Escenario Estoy diseñando un formulario web en el que quiero mostrar un combo que se carga dinámicamente con una petición XHR. Problema Los datos a cargar cuentan con miles de registros. Necesito un combo que se cargue de manera dinámica y disponga de un autocomplete para filtrar los resultos. Solución React select es un módulo…

  • Chart.js: cómo cambiar el idioma (locale) dinámicamente

    Escenario Por un lado una aplicación que permite al usuario personalizar el idioma del sitio. Por otro, una gráfica de tipo línea temporal generada con la biblioteca Chart.js, integrada en un módulo de React con react-chartjs-2. Problema Según un comentario de un usuario de Stackoverflow, basta con un require('moment/min/moment-with-locales'); y establecer el valor de la…

  • OsTicket y nginx

    Escenario Después de 5 años campando en un Ubuntu 16.04 ha llegado la hora de migrar la aplicación osTicket a un nuevo servidor. Para quien no la conozca osTicket es un sistema de incidencias que podemos desplegar en un servidor propio. La aplicación web cuenta con una herramienta que automáticamente detecta una diferencia de versiones…

  • Autenticación múltiple en Spring boot: JWT y formulario

    Escenario Por exigencias de un tercero debemos adaptar nuestro servicio web para que sea compatible con autenticación por JWT. Hasta ahora las llamadas al API se hacían desde dentro de la aplicación usando las mismas credenciales del usuario autenticado por cookie. La configuración de la cadena de filtros de Spring Security es la siguiente:

  • Cómo instalar un certificado letsencrypt para un sitio gestionado por Cloudflare

    Escenario Estamos usando CloudFlare para uno de nuestros dominios y necesitamos instalar o renovar un certificado de Letsencrypt. CloudFlare es un servicio que, entre otras, proporciona un proxy (intermediario) entre los visitantes del sitio y el servidor donde está hospedado el sitio web. Configuración de Cloudflare Gestionar un sitio web desde CloudFlare es sencillo. Después…

  • Sonata Admin: el calendario no se cierra

    Escenario Incluir un filtro de rango de fechas en SonataAdmin que use un calendario para seleccionar la fecha es más o menos fácil. Primero añadimos el siguiente bloque en el admin de nuestra entidad:

    Y la siguiente clave bajo form_themesen el fichero config/packages/twig.yaml:

    Problema El calendario no se cierra automáticamente cuando se selecciona…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *