use mapping in locale

src/components/SelectLang/index.js

@@ -13,32 +13,29 @@ export default class SelectLang extends PureComponent {
   render() {
     const { className } = this.props;
     const selectedLang = getLocale();
+    const locales = ["zh-CN", "zh-TW", "en-US", "pt-BR"];
+    const languageLabels = {
+        "zh-CN": "简体中文",
+        "zh-TW": "繁体中文",
+        "en-US": "English",
+        "pt-BR": "Português",
+    };
+    const languageIcons = {
+        "zh-CN": "🇨🇳",
+        "zh-TW": "🇭🇰",
+        "en-US": "🇬🇧",
+        "pt-BR": "🇵🇹",
+    };
     const langMenu = (
       <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changeLang}>
-        <Menu.Item key="zh-CN">
-          <span role="img" aria-label="简体中文">
-            🇨🇳
-          </span>{' '}
-          简体中文
-        </Menu.Item>
-        <Menu.Item key="zh-TW">
-          <span role="img" aria-label="繁体中文">
-            🇭🇰
-          </span>{' '}
-          繁体中文
-        </Menu.Item>
-        <Menu.Item key="en-US">
-          <span role="img" aria-label="English">
-            🇬🇧
-          </span>{' '}
-          English
-        </Menu.Item>
-        <Menu.Item key="pt-BR">
-          <span role="img" aria-label="Português">
-            🇵🇹
+        {locales.map(locale => (
+          <Menu.Item key={locale}>
+            <span role="img" aria-label={languageLabels[locale]}>
+              {languageIcons[locale]}
             </span>{' '}
-          Português
+            {languageLabels[locale]}
           </Menu.Item>
+        ))}
       </Menu>
     );
     return (