无法读取未定义错误的属性“匹配”
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:无法读取未定义的属性“匹配”
无法在 useParams 读取未定义的属性“匹配” - React Hooks