javascript - Cannot read property 'match' of undefined error - Stack Overflow

admin管理员组

文章数量:1026630

I am trying to display some text in React JS frontend in place of a profile image when it isn't available.Basically, I pass the current customer name to a function which extracts the first characters of all the words in the name. I am able to display just the name but when I do a function call, I get Cannot read property 'match' of undefined" error and the page does not render. Console.log() displays undefined.

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

I am trying to display some text in React JS frontend in place of a profile image when it isn't available.Basically, I pass the current customer name to a function which extracts the first characters of all the words in the name. I am able to display just the name but when I do a function call, I get Cannot read property 'match' of undefined" error and the page does not render. Console.log() displays undefined.

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

• javascript
• html
• reactjs
• frontend
• jsx

Share Improve this question Follow asked Mar 8, 2018 at 14:16 user9460641user9460641 2

• Means this.state.lead_details.customer_name is undefined in that case, you need to either make sure it's always set or you do a check (or default value) in your acronym_name function. – ChristianM Commented Mar 8, 2018 at 14:20
• 1 Can you give an example or point to a link on how I'd do any of those? I am just a beginner at the moment. – user9460641 Commented Mar 8, 2018 at 14:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

this.state.lead_details.customer_name seems undefined, so you need to catch that case.

You have multiple ways of doing this, if you use babel this declaration with default value should work:

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

Otherwise you can also check inside the function if undefined was given:

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

Lastly you could in some way prevent giving undefined to the function in the first place. For example like this:

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

        }
    }

I am trying to display some text in React JS frontend in place of a profile image when it isn't available.Basically, I pass the current customer name to a function which extracts the first characters of all the words in the name. I am able to display just the name but when I do a function call, I get Cannot read property 'match' of undefined" error and the page does not render. Console.log() displays undefined.

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

I am trying to display some text in React JS frontend in place of a profile image when it isn't available.Basically, I pass the current customer name to a function which extracts the first characters of all the words in the name. I am able to display just the name but when I do a function call, I get Cannot read property 'match' of undefined" error and the page does not render. Console.log() displays undefined.

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

• javascript
• html
• reactjs
• frontend
• jsx

Share Improve this question Follow asked Mar 8, 2018 at 14:16 user9460641user9460641 2

• Means this.state.lead_details.customer_name is undefined in that case, you need to either make sure it's always set or you do a check (or default value) in your acronym_name function. – ChristianM Commented Mar 8, 2018 at 14:20
• 1 Can you give an example or point to a link on how I'd do any of those? I am just a beginner at the moment. – user9460641 Commented Mar 8, 2018 at 14:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

this.state.lead_details.customer_name seems undefined, so you need to catch that case.

You have multiple ways of doing this, if you use babel this declaration with default value should work:

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

Otherwise you can also check inside the function if undefined was given:

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

Lastly you could in some way prevent giving undefined to the function in the first place. For example like this:

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

        }
    }

本文标签： javascriptCannot read property 39match39 of undefined errorStack Overflow