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

Posted 2023-02-22

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

【英文标题】：Cannot read property of "undefined" even though the object IS defined! [React]

【发布时间】：2017-11-10 13:31:24

【问题描述】：

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

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

我不明白的是，当我在上面的行中控制台记录相同的语言对象和我传递给它的键 (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:[e-mail]'
                ,
                
                    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 的输出：

【问题讨论】：

你在哪里定义language？

我从模块顶部的 json 文件中导入它： import language from '../../constants/essential_lang'

在language[ selectedLang ] 内包含navigation 键？

我在最初的问题中添加了更多代码。你可以看到 language["de_de"].navigation 应该提供对 menuItems 对象的访问。

检查完整这个，language[ selectedLang ].navigation.locales[ loc ]; 表示导航应该包含一个关键的语言环境，selectedLang 应该包含一个正确的关键。告诉我一件事，您是否随时在控制台中为 selectedLang 获得 undefined 或 null ？

【参考方案1】：

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

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

很难不看所有代码。

【讨论】：

不，这不是问题所在。代码正在中断，因为语言变量未定义。我认为马亚内克是对的。这可能与我从该文件外部导入该变量的方式有关。

我在最初的问题中添加了更多代码，以防澄清问题。

另外，如果您希望 jsx 仍然正确执行，我相信您提供的解决方案需要包含在 () 中，而不是引号中

OP 正在使用 React 和 JSX。

对了。道歉。我没有这些经验。