¿Cómo puedo establecer una variable con un valor utilizando React-Redux en la carga inicial de la página?
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
?
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 objetomessages
. 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 etiquetah1
. Puedes usar una declaración condicional o el operador&&
para renderizar condicionalmente la etiquetah1
. Aquí tienes un ejemplo usando la declaración condicional:Este código solo renderizará la etiqueta
h1
sidefaultLanguage
no está vacío. Esto debería solucionar el error y cambiar dinámicamente el idioma según la preferencia del usuario.