如何在初始页面加载时使用 React-Redux 将变量设置为值？

Question

我正在为我的应用程序创建一个语言切换器。到目前为止，我可以支持 4 种语言（英语 [en]、西班牙语 [sp]、法语 [fr] 和阿拉伯语 [ar]）。我已经将所有语言属性文件转换为 JSON，我可以将这些文件导入到我的 .jsx 文件中。但是，在设置语言方面，我运行遇到了问题。

例如：我有这行代码：<h1>{messages.en["user.userprofile"]}</h1> 这翻译成英文 User Profile。如果我将语言切换为法语 <h1>{messages.fr["user.userprofile"]}</h1>，我将得到：Profil d'utilisateur.

我没有对语言进行硬编码，而是试图让它动态变化。我正在使用 Redux 加载用户配置文件。

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

  ...

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

我想在页面加载时获得 defaultLanguage。例如，如果用户的语言是英语，defaultLanguage 将被设置为 en。但是，当我这样做时，出现白屏和此错误：

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 (react-dom.development.js?61bb:23964)
    at performUnitOfWork (react-dom.development.js?61bb:22776)
    at workLoopSync (react-dom.development.js?61bb:22707)

但是，如果我注释掉 h1 标记并为 defaultLanguage 放置 console.log，我注意到它打印了 5 次。在前 2 次，defaultLanguage 设置为 []。然后在最后 3 次，defaultLangauge 被设置为从 Redux 加载的用户语言值。我怎样才能在页面加载时初始化它，这样它就不会未定义？我是不是遗漏了什么，或者我是否需要更改 h1 标签中 defaultLanguage 的书写方式？

Answer 1

其实你的问题不在 Redux 中。

当你试图从 messages.en["user.userprofile"] 获取价值时，你假设你从 messages.en.user.userprofile 获取价值，但不，它不是这样工作的 - JS 认为它是从对象获取价值通过键 user.userprofile 和 JS 的对象结构是

{
'messages': {
    'en': {
      'user.userprofile': {
       }
    }
  }
}

对您的问题最简单且成本最低的解决方案是使用 lodash 中的方法 get 或任何其他类似的实用程序库。这样你就可以写

get(messages.en, 'user.userprofile', [])

并确保通过组合键获取值。

如何在初始页面加载时使用 React-Redux 将变量设置为值？

How do I set a variable to value using React-Redux on the initial page load?

javascript

json

properties

reactjs

react-redux