Tengo un componente que muestra un cuadro desplegable (HTML <select> ). Los datos de ese cuadro desplegable son una lista de cadenas proporcionadas como uno de los accesorios (llamémoslo data ), y el índice del elemento seleccionado se mantiene como un estado (llamémoslo idx ). También hay un botón en este componente que comprueba si la opción seleccionada es válida o no.

Inicialmente, todo funciona bien ya que los data no están vacíos. Sin embargo, después de una refactorización en otras partes, el mecanismo de carga de datos ahora es asíncrono. Esto significa data proporcionados podrían estar vacíos cuando se crea este componente. Para manejar este caso, inicializo idx a undefined si la lista está vacía cuando se crea este componente.

Ahora hay un problema, cuando se crea el componente, idx se establece en undefined . Sin embargo, cuando el componente se actualiza después de cambiar los data prop (a algo que no está vacío), idx aún no está undefined . Esto hace que el mecanismo de verificación arroje errores (cuando el usuario hace clic en el botón).

¿Cuál es la mejor manera de solucionar este problema?

Inicialmente, pensé en el estado derivado, ya que idx es claramente un estado derivado de data . Sin embargo, hay un artículo en el blog de reacción que desaconseja encarecidamente el uso de estados derivados, y no estoy seguro de si mi caso encaja en él o no.

Así que tomé el enfoque recomendado de ese artículo. En el componente principal, calculo una propiedad key , que se establece en 0 cuando data están vacíos y en 1 cuando no lo están, cada vez que representa este componente. Esto resuelve el problema porque el componente se reconstruirá cuando cambie key . Sin embargo, personalmente no me gusta este enfoque, ya que hace que el código de mi componente principal sea más complicado. También restablece todos los demás estados del componente (en mi caso particular, esto está bien, pero puedo ver problemas si este componente es más complejo y tiene otros estados que no necesariamente quiero restablecer).

¿Hay otras formas mejores de solucionar este problema?