Advertencia justa, soy desarrollador REACT novato . Vengo del mundo .NET. He tomado cursos de capacitación de una semana en Pluralsight y he creado algunas aplicaciones de demostración simples. Estoy publicando esta pregunta después de varios días de búsquedas en Google y leyendo numerosos artículos. No tengo ningún otro desarrollador de REACT en nuestro equipo, así que estoy un poco atrapado y espero que la comunidad aquí pueda ayudarme.

Actualmente en el trabajo, estoy construyendo una aplicación web REACT que tiene varias funciones. La aplicación es una aplicación web para la demostración de flujos OAUTH con Azure B2C. Tengo varios botones en mi aplicación que demuestran flujo implícito, flujo de autenticación, token de actualización, etc. Cuando se hace clic en cada uno de estos botones, el usuario es redirigido a los puntos finales OAUTH para iniciar sesión, etc. Por lo tanto, el usuario es redirigido fuera de mi aplicación REACT. Para almacenar algunas de las elecciones que hizo el usuario en el formulario y conservar el token OAUTH y otros valores, estoy almacenando valores en estado REACT.

this.state = {
  fieldName1: localStorage.getItem("FieldName1"),
  fieldName2: localStorage.getItem("FieldName2"),
  fieldName3: localStorage.getItem("FieldName3"),
  fieldName4: localStorage.getItem("FieldName4"),
  fieldName5: localStorage.getItem("FieldName5"),
};

Como puede imaginar, una vez que la redirección ocurre fuera de mi aplicación REACT, los valores de estado se pierden. Así que busqué el uso de cookies. Luego encontré algunos artículos sobre el uso del almacenamiento local. Eso es actualmente lo que tengo en mi código. Mi problema aparece cuando se redirige al usuario a mi aplicación. No puedo recargar los valores del estado. Cuando ejecuto la aplicación en Chrome y miro el panel de herramientas de desarrollo y mi almacenamiento local, mis cinco valores están presentes. Sin embargo, los cinco valores de mi estado NO se vuelven a cargar , desde el almacenamiento local. En mi aplicación, termino llamando "setState" varias veces, ya que el usuario hace clic en diferentes botones y tienen lugar diferentes "eventos". Leí este hilo y luego consolidé todas mis llamadas setState en una función.

updateStateValuesAndLocalStorage(name, value) {
this.setState(
  {
    name: value
  },
  updatedState => {
    console.log("updatedState: ", updatedState);
  }
);
localStorage.setItem(name, value);
}

También lea este hilo así Sé que lo asincrónico probablemente está causando mis problemas. Pero como soy un novato, estoy luchando por resolver esto. ¡Cualquier ayuda u orientación aquí sería muy apreciada!

1
tcDev 4 dic. 2019 a las 02:14

2 respuestas

La mejor respuesta

Parece que siempre se almacenan, en la función updateStateValuesAndLocalStorage, en la propiedad de nombre, en lugar del nombre de propiedad real.

Debería intentar usar [nombre]: valor en lugar de nombre: valor.

Creo que es por eso que aparece en localStorage pero no en el estado:

LocalStorage puede tomar una variable String como argumento, pero Object trata los nombres de variables en nombres de propiedades sin [] 's como una cadena.

1
adamz4008 4 dic. 2019 a las 00:17

¿Qué tipo de objetos estás almacenando? ¿Son todas cuerdas? LocalStorage solo almacena cadenas, creo.

Al guardar en localStorage, intente cambiar su código a esto:

localStorage.setItem(name, JSON.stringify(value));

Y al cargarlo de nuevo desde localStorage:

this.state = {
  fieldName1: JSON.parse(localStorage.getItem("fieldName1"))
}

Esto debería garantizar que las variables más complejas se almacenen y restauren correctamente.

Además, asegúrese de que sus nombres coincidan: en su pregunta, las variables de estado comienzan con caracteres en minúscula, pero está leyendo elementos que comienzan con caracteres en mayúscula

1
Thomas Müller 4 dic. 2019 a las 01:23