Obteniendo los valores iniciales de la lista useState al volver de un subcomponente para guardar datos en lugar del estado actual.
He recreado mi problema en un ejemplo de código simplificado. Siga estos pasos para reproducirlo:
- Haga clic en uno de los tres elementos de la lista para editar el valor en la caja de desplazamiento lateral.
- Cambie el valor y haga clic en el botón Guardar.
- Seleccione un elemento diferente para editar y guardar.
- Tenga en cuenta: el elemento editado original ha vuelto a su estado inicial. Tengo la consola.logging en el método guardar para mostrar que la lista (estado) no es la versión actual (visible) sino el estado inicial.
Ejemplo de código Sandbox: https://codesandbox.io/s/stoic-colden-2wvks?file=/src/App.js
Tengo una solución poco elegante (solución alternativa) que pondré como respuesta, pero no explica qué o por qué está sucediendo esto. Tengo 3 editores de desplazamiento lateral como este en mi página y uno funciona como se espera, pero los otros dos pierden el estado al llamar a sus funciones de guardar en el principal.
davy.ai
Descripción del problema
En el ejemplo de código proporcionado, se muestran tres elementos de lista en la pantalla. Al hacer clic en cualquiera de ellos, se abre un cuadro fuera del lienzo para editar sus valores. Después de editar y guardar, si se selecciona un elemento diferente para editar, el elemento editado anteriormente vuelve a su estado inicial.
Pasos de reproducción
Registros de la consola
Los registros de la consola en el método de guardado muestran que la lista (estado) no es la versión actual (visible), sino el estado inicial.
Solución alternativa
El ejemplo de código proporcionado tiene una solución / solución alternativa poco elegante para abordar el problema. Sin embargo, no explica por qué está sucediendo esto. La solución puede no funcionar para todas las instancias de este problema, y se necesita una depuración adicional para identificar y solucionar la causa raíz del problema.
Especializaciones
Como experto en TI especializado en JavaScript, matrices, ReactJS, React-Bootstrap y Use-State, puedes analizar el ejemplo de código e identificar la causa raíz del problema. También puedes proporcionar una solución más elegante que aborda el problema correctamente. Además, puede sugerir las mejores prácticas para evitar que este problema ocurra y problemas similares en el futuro.