es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo establecer una variable con un valor utilizando React-Redux en la carga inicial de la página?

¿Cómo puedo establecer una variable con un valor utilizando React-Redux en la carga inicial de la página?

20 Jul, 2023 Programación

Estoy creando un selector de idioma para mi aplicación. Hasta ahora, puedo admitir 4 idiomas (Inglés [en], Español [es], Francés [fr] y Árabe [ar]). Ya he convertido todos los archivos de propiedades de idioma a JSON y puedo importar esos archivos a mi archivo .jsx. Sin embargo, cuando se trata de cambiar el idioma, estoy teniendo problemas.

Por ejemplo:
Tengo esta línea de código: <h1>{messages.en["user.userprofile"]}</h1>
Esto se traduce a Perfil de usuario en inglés. Si cambio el idioma a francés <h1>{messages.fr["user.userprofile"]}</h1>, obtendré: Profil d’utilisateur.

En lugar de codificar el idioma, estoy tratando de hacer que cambie dinámicamente. Estoy utilizando Redux para cargar el perfil del usuario.

  const defaultLanguage = useSelector(
    (state) => state.profileReducer.profile.language || []
  );

…

{messages[defaultLanguage][“user.userprofile”]}

Quiero obtener el defaultLanguage al cargar la página. Por ejemplo, si el idioma del usuario es inglés, defaultLanguage se establecerá en en. Sin embargo, cuando hago esto, obtengo una pantalla en blanco y este error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'user.userprofile')
at UserProfileNew (UserProfileNew.jsx?e01f:146)
at renderWithHooks (react-dom.development.js?61bb:14985)
at mountIndeterminateComponent (react-dom.development.js?61bb:17811)
at beginWork (react-dom.development.js?61bb:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994)
at invokeGuardedCallback (react-dom.development.js?61bb:4056)
at beginWork$1 (react-dom.development.js?61bb:23964)
at performUnitOfWork (react-dom.development.js?61bb:22776)
at workLoopSync (react-dom.development.js?61bb:22707)

Sin embargo, si comento la etiqueta h1 y pongo un console.log para defaultLanguage, noto que se imprime 5 veces. En las dos primeras veces, defaultLanguage se establece como []. Luego, en las últimas 3 veces, defaultLanguage se establece con el valor del idioma del usuario cargado desde Redux. ¿Cómo puedo inicializar esto al cargar la página para que no sea undefined? ¿Me falta algo o debo cambiar cómo escribo defaultLanguage en la etiqueta h1?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema es que el valor de defaultLanguage es inicialmente un array vacío, lo cual no es una clave válida para acceder al objeto messages. Por lo tanto, obtienes el error “No se pueden leer las propiedades de indefinido”.

    Para solucionar esto, puedes agregar una verificación para ver si el valor de defaultLanguage está vacío antes de renderizar la etiqueta h1. Puedes usar una declaración condicional o el operador && para renderizar condicionalmente la etiqueta h1. Aquí tienes un ejemplo usando la declaración condicional:

    const defaultLanguage = useSelector(
  (state) => state.profileReducer.profile.language
);

...

{defaultLanguage &&
  <h1>{messages[defaultLanguage]["user.userprofile"]}</h1>
}

    Este código solo renderizará la etiqueta h1 si defaultLanguage no está vacío. Esto debería solucionar el error y cambiar dinámicamente el idioma según la preferencia del usuario.

Comments are closed.