He estado tratando de configurar el diseño de la cuadrícula de reacción con mi proyecto y no he podido fusionar dos de los ejemplos. Almacenamiento local y agregar/eliminar widgets
Pensé que también necesitaba almacenar artículos en LS y he estado tratando de hacerlo funcionar pero sin suerte. Actualmente, los elementos se están almacenando y el diseño está vacío (no estoy seguro de por qué), pero los elementos se restablecen al actualizar. Estoy bastante seguro de que se debe al estado .map , pero no estoy seguro de cómo puedo solucionarlo.
Si algo me puede ayudar, se lo agradecería, ya que he estado atascado en esto por un tiempo.
He hecho una caja de arena para facilitar la ayuda.
Creo que esto tiene que ver con el hecho de que la primera representación del componente ResponsiveReactGridLayout cuenta como una llamada onChange . Por lo tanto, llamará a saveToLS() con una matriz vacía de elementos. Debe incluir un useEffect que obtendrá el diseño almacenado en localStorage al cargar la página. Luego almacene el diseño recuperado en un useState y páselo al componente ResponsiveReactGridLayout . Después de eso, puede establecer un indicador que permita que ResponsiveReactGridLayout actualice y guarde el diseño en el almacenamiento local, pero esto es opcional.
Además, recomendaría encarecidamente cambiar su código de código basado en clase a código funcional. La codificación basada en clases en React está en su mayoría desactualizada y solo se usa en casos de uso específicos. La programación funcional prepararía su código para el futuro.