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

Question

I am trying to generate the markup for a dropdown menu that will allow users to change the language/locale of the site.

But my component will not render because the browser is telling me the object (language) I'm trying to pull country names (locales) off of is undefined.

What I don't understand is that when I console log that same language object and the key that I'm passing to it (selectedLang) in the lines above, they both print out just fine.

Here is my code:

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;
    }

I think the problem may be the way that I am importing the language object from my essential_lang.js file.

I'm importing into the index.jsx file (see code above) with this line:

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

And here is some of the code from that file:

   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': { ...

Here is output for the console.logs:

Answer 1

Is it as simple as returning a string?

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

Difficult without seeing all the code.