Estoy creando un conmutador de idiomas para mi aplicación. Hasta ahora, puedo admitir 4 idiomas (inglés [en], español [sp], francés [fr] y árabe [ar]). Ya convertí todos los archivos de propiedades de idioma a JSON y puedo importar esos archivos a mi archivo .jsx. Sin embargo, cuando se trata de configurar el idioma, tengo problemas.
Por ejemplo: tengo esta línea de código: <h1>{messages.en["user.userprofile"]}</h1> Esto se traduce como 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 usando Redux para cargar el perfil de usuario.
const defaultLanguage = useSelector( (state) => state.profileReducer.profile.language || [] ); ... <h1>{messages[defaultLanguage]["user.userprofile"]}</h1> 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, aparece 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 console.log para defaultLanguage , noto que se imprime 5 veces. En las primeras 2 veces, defaultLanguage se establece en [] . Luego, en las últimas 3 veces, defaultLangauge se establece en el valor de idioma del usuario cargado desde Redux. ¿Cómo puedo inicializar esto en la carga de la página para que no quede indefinido? ¿Me estoy perdiendo algo o necesito cambiar la forma en que escribo el defaultLanguage en la etiqueta h1 ?
En realidad, su problema no está en Redux.
Cuando intenta obtener valor de messages.en["user.userprofile"] , supone que obtiene valor de messages.en.user.userprofile pero no, no funciona de esta manera: JS lo considera como obtener valor de un objeto por clave user.userprofile y estructura de objeto para JS es
{ 'messages': { 'en': { 'user.userprofile': { } } } } La solución más simple y económica para su problema es usar el método get from lodash , o cualquier otra biblioteca de utilidades similar. Así podrás escribir
get(messages.en, 'user.userprofile', [])y asegúrese de obtener valores por clave compuesta.