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.
