javascript - 无法读取 "undefined"的属性，即使对象已定义! [ react ]

Question

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

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

我不明白的是，当我在上面的行中控制台记录相同的语言对象和我传递给它的 key (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>
        ";

不看所有代码会很困难。