反应TypeError：无法读取未定义的属性“替换”

Question

I cannot figure out why I am getting an error for a replace function inside the Render function of my component.

TypeError: Cannot read property 'replace' of undefined

I am simply trying to replace the string value from services.serviceImage and replace the string like "react-site/public/","" just like you would normally do on any string, I made some tests and I can confirm the value returned is a string and I made some other string replaces and it worked but in this case something is not working...why?

I have already tried as a regex method with no luck:

imgUrl = imgUrl.replace("/react\-site\/public/g", "");

For some reason, my node server won't accept a replace method for the doc.serviceImage response either!!!

What am I doing wrong here...?

My complete code:

import React, {Component} from 'react';
import axios from 'axios';
//import { Link } from "react-router-dom";
import './catalogue.scss';

class ServicesPage extends Component {
  state = {
    services: [],
    loading: false
  }
  componentDidMount(){

    this.setState({
      loading: true
    });

    axios.get('/services')
    .then(response => {
      console.log(response);
      this.setState({
        services: response.data.services,
        loading: false
      });
    })
    .catch( error => {
      console.log(error);
    });
    document.title = "Pain Relief and Massage Services - LA Therapy";
  }//componentDidMount

  replaceStr(str, newStr) {
   return  str = str.replace(str, newStr);
  }

  render(){

    let pageRender; 
    if(this.state.loading){
     pageRender =  <div className="pageLoader">Loading... <img src="./images/ui/spinner.svg"/></div>
    }else{
      {this.state.services.map(services => {
        let backgroundUrl = {};
        let imgUrl = services.serviceImage;

        imgUrl = imgUrl.replace("/react\-site\/public/g", ""); //this string replace is not working

        console.log(imgUrl);


        if (services.serviceImage) {

           backgroundUrl = {
            backgroundImage: `url(${imgUrl})`,
            backgroundSize: 'cover'  
          };

        }else{
         backgroundUrl = {
            backgroundImage: 'url(./images/ui/add-image-wide.png)',
            backgroundSize: 'cover'  
          };

          pageRender =  <div className="columns white-bg">
          <div className="grid-x">
          {this.state.services.map(services =>

            <div key={services._id} className="cell large-6 medium-12 small-12 end padding-all-3x">
            <div className="catalogue-medium gray_2-border white-bg margin-distributed round-small" style={backgroundUrl}>
              <div className="dark-overlay"></div>
              <img src="./uploads/services/1538735070981-1538653957308-back-massage.jpg"/>
              <div className="tittle-bottom">{services.name} </div>
            </div>
            </div> 
            )}
          </div>
        </div>


        }

        })
      }
    }

    return(
      <div>
        {pageRender}
      </div>
    );
  }
}

export default ServicesPage;

Answer 1

You look to see if the property is valid AFTER you use it

let imgUrl = services.serviceImage;  <-- read it
imgUrl = imgUrl.replace(...)  <-- where the error occurs
if (services.serviceImage) {  <-- is truthy

So move the logic inside the check

let imgUrl = services.serviceImage; 
if (services.serviceImage) {  
  imgUrl = imgUrl.replace(...)

or set it to an empty string if you some reason need imgUrl outside of the if

let imgUrl = services.serviceImage || '';
imgUrl = imgUrl.replace(...)

Answer 2

You might check the this.state.services first, before actually rendering them

 { this.state.services.length > 0 && this.state.services.map(services => {
        let backgroundUrl = {};
        let imgUrl = services.serviceImage;

        imgUrl = imgUrl.replace("/react\-site\/public/g", ""); //this string replace is not working

        console.log(imgUrl);

Answer 3

Maybe the imageUrl is undefined initially, try for a string check whether the variable is a string. The code goes like:

imgUrl = typeof imgUrl === 'string' ? imgUrl.replace("/react\-site\/public/g", "") : '';

Answer 4

Put you imgUrl.replace(...) inside the if (services.serviceImage) statement. In some cases services.serviceImage has an undefined value and you are getting error cuz of that.

...

if (services.serviceImage) {

let backgroundUrl = {};
let imgUrl = services.serviceImage;

imgUrl = imgUrl.replace("/react\-site\/public/g", ""); //this string replace is not working

console.log(imgUrl);

backgroundUrl = {
   backgroundImage: `url(${imgUrl})`,
   backgroundSize: 'cover'  
};

}

...

You have to avoid changing state with an undefined value. you are getting and undefined value and setting it to the state. your state will get changed and renders over an undefined value. First of all, you have to check if services.serviceImage has a value then you set the value to the state. Secondly, on you render wrap your if statement over your all code to make sure you will run your code over a true value.