He estado tratando de hacer un generador de gráficos simple en React. Uso Handsontable para permitir que el usuario ingrese datos dinámicos y me gustaría que los cambios se reflejen en el gráfico. Aquí está mi código: Codesandbox reproducible .
Pequeño descargo de responsabilidad : el paquete handsontable tiene bastantes errores en codesandbox. Simplemente haga doble clic en un número y aparecerá un campo de entrada donde podrá editar los datos.
El problema
Por alguna razón, solo puede editar algo de la primera fila de datos y la segunda fila de datos (etiquetas no incluidas). Después de eso, el gráfico ya no se actualizará. Así que intente cambiar 11 bajo la etiqueta de Mercedes y verá lo que quiero decir. Esos se pueden cambiar y los cambios se reflejarán en el gráfico, pero cualquier número cambiado después de eso no actualizará el gráfico.
Ahora he leído este problema de github en el que la gente sugiere agregar una clave aleatoria ( key={Math.random()} ) o la función de redraw , y eso funciona de alguna manera, pero todo el gráfico se vuelve a dibujar, que no es exactamente lo que yo desear.
El problema era con la mutación de propiedades anidadas profundas. He usado lodash clonedeep para hacer una clonación profunda del objeto. Luego cambiar el contenido de ese objeto y establecer el estado. Todo funcionó bien después de eso.
Actualicé la reproducción de codesandbox por si alguien lo necesita.