无法读取未定义错误的属性“匹配”

Posted

技术标签:

【中文标题】无法读取未定义错误的属性“匹配”【英文标题】:Cannot read property 'match' of undefined error 【发布时间】:2018-08-16 22:24:19 【问题描述】:

我试图在 React JS 前端显示一些文本来代替不可用的个人资料图像。基本上,我将当前客户名称传递给一个函数,该函数提取名称中所有单词的第一个字符.我只能显示名称,但是当我执行函数调用时,我收到无法读取未定义的属性“匹配”错误并且页面未呈现。Console.log() 显示未定义。

html

<li className="nav-item">

               <div id="container_acronym">
                 <div id="name_acronym">                        
                    this.acronym_name(this.state.lead_details.customer_name)
                 </div>
                </div>                 
        </li>

JS:

acronym_name(str)
var regular_ex=/\b(\w)/g;
var matches = str.match(regular_ex);
var acronym = matches.join('');
document.getElementById("name_acronym").innerHTML = acronym;

【问题讨论】:

意味着 this.state.lead_details.customer_name 在这种情况下是未定义的,您需要确保它始终设置,或者在您的 acronym_name 函数中进行检查(或默认值)。 您能否举个例子或指向一个链接,说明我将如何做这些?我现在只是一个初学者。 【参考方案1】:

this.state.lead_details.customer_name 似乎未定义,因此您需要抓住这种情况。

你有多种方法可以做到这一点,如果你使用 babel 这个带有默认值的声明应该可以工作:

acronym_name(str = '')
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;

否则你也可以检查函数内部是否给出了 undefined:

acronym_name(str)
    if (typeof str == 'undefined') 
        str = '';
    
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;

最后,您可以以某种方式首先防止给函数提供 undefined 。比如这样:

<li className="nav-item">
    <div id="container_acronym">
        <div id="name_acronym">                        
           this.acronym_name(this.state.lead_details.customer_name || '')
        </div>
    </div>                 
</li>

【讨论】:

我使用了第二种方法。虽然只是一个变化。为其余代码添加 else 条件。在下面发布最终答案。【参考方案2】:
 acronym_name(str)

        if (typeof str == 'undefined')    
            str = '';
        
        else 
            var regular_ex=/\b(\w)/g;
            var matches = str.match(regular_ex);
            var acronym = matches.join('');
            return acronym;

        
    

【讨论】:

以上是关于无法读取未定义错误的属性“匹配”的主要内容,如果未能解决你的问题,请参考以下文章

Vue路由器错误:TypeError:无法读取未定义的属性“匹配”

Npm 安装期间“无法读取未定义的属性‘匹配’”

无法在 useParams 读取未定义的属性“匹配” - React Hooks

TypeError:无法读取未定义 Passpor 错误的属性“名称”

错误解码:TypeError:无法读取未定义的属性“2”

TypeError:使用来自 react-router 的 useParams 时无法读取未定义的属性“匹配”