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

IT技术 javascript html reactjs frontend jsx
2021-05-28 04:47:16

我试图在 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;
}
2个回答

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>

 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;

        }
    }
其它你可能感兴趣的问题
上一篇如何处理redux表单提交的数据 下一篇识别 Formik FieldArray 中已删除（创建和修改）的项目