即使对象已定义，也无法读取“未定义”的属性！ [反应]

Question

我正在尝试为允许用户更改网站的语言/区域设置的下拉菜单生成标记。

但是我的组件不会呈现，因为浏览器告诉我我试图从中提取国家名称（语言环境）的对象（语言）是未定义的。

我不明白的是，当我在上面的行中控制台记录相同的语言对象和我传递给它的键 (selectedLang) 时，它们都打印出来了。

这是我的代码：

compileAvailableLocales() {
        let locales = availableLangs;
        let selectedLang = this.props.lang;
        console.log("selectedLang: ", selectedLang, typeof selectedLang);
        console.log("availableLangs: ", availableLangs);
        console.log("language: ", language);

        let markup = locales.map( (loc) => {
            let readableName = language[ selectedLang ].navigation.locales[ loc ];

            return (
                <li
                  key={ loc }
                  value={ loc }
                  onMouseDown={ this.handleLangChange }>
                    { readableName }
                </li>
            );
        });

        return markup;
    }

我认为问题可能是我从 essential_lang.js 文件中导入语言对象的方式。

我正在使用这一行导入 index.jsx 文件（参见上面的代码）：

import { language } from '../../constants/essential_lang'

以下是该文件中的一些代码：

   export const language = {
    'de_de': {
        footer: {
            links: [
                {
                    title: 'KUNDENSERVICE',
                    endpoint: 'mailto:kundenservice@spinmaster.com'
                },
                {
                    title: 'Datenschutz',
                    endpoint: '/de_de/privacy'
                },
                {
                    title: 'Impressum und Allgemeine Geschäftsbedingungen',
                    endpoint: '/de_de/terms'
                }
            ],
            copyright: 'Spin Master Ltd. All Rights Reserved.'
        },
        fourohfour: {
            heading: 'Oh Noes!',
            message: 'This page doesn\'t exist.',
            gohome: 'Back Home'
        },
        loading: "Loading",
        navigation: {
            menuitems: [
                {
                    title: 'Videos',
                    endpoint: '/de_de/videos/'
                },
                {
                    title: 'Colleggtibles',
                    endpoint: '/de_de/colleggtibles'
                },
                {
                    title: 'Produkte',
                    endpoint: '/de_de/toys/'
                },
                {
                    title: 'Hilfe/Häufig gestellte Fragen',
                    endpoint: 'https://spinmastersupport.helpshift.com/a/hatchimals/?p=web&l=de'
                },
                {
                    title: 'Eltern',
                    endpoint: '/de_de/parents/'
                },
                {
                    title: 'Spiele',
                    endpoint: '/de_de/activities/'
                },
                {
                    title: 'Wo erhältlich',
                    endpoint: '/de_de/where-to-buy/'
                }
            ],
            locales: {
                de_de: 'Deutschland',
                en_au: 'Australia',
                en_ca: 'Canada',
                en_uk: 'United Kingdom',
                en_us: 'United States',
                es_es: 'España',
                es_mx: 'México',
                fr_fr: 'France',
                it_it: 'Italia',
                nl_nl: 'Dutch',
                tr_tr: 'Türkiye'
            }
        }
    },
    'en_au': { ...

这是 console.logs 的输出：

Answer 1

返回一个字符串就这么简单吗？

return "
            <li
              key={ loc }
              value={ loc }
              onMouseDown={ this.handleLangChange }>
                { readableName }
            </li>
        ";

很难不看所有代码。