Javascript 反应类型错误：无法读取属性'；更换'；未定义的

我无法理解为什么我的组件的渲染函数中的替换函数会出错

TypeError:无法读取未定义的属性“replace”

我只是尝试替换services.serviceImage中的字符串值，并替换类似的字符串“react site/public/”，“，就像您通常对任何字符串所做的那样，我做了一些测试，我可以确认返回的值是一个字符串，我做了一些其他字符串替换，它工作了，但在这种情况下有些东西不工作…为什么

我已经尝试过使用正则表达式方法，但运气不佳：

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

由于某些原因，我的节点服务器也不会接受doc.serviceImage响应的替换方法

我在这里做错了什么

我的完整代码：

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;

import React，{Component}来自'React'；
从“axios”导入axios；
//从“react router dom”导入{Link}；
导入“/catalog.scss”；
类ServicesPage扩展组件{
状态={
服务：[]，
加载：错误
}
componentDidMount（）{
这是我的国家({
加载：正确
});
axios.get（“/services”）
。然后（响应=>{
控制台日志（响应）；
这是我的国家({
服务：response.data.services，
加载：错误
});
})
.catch（错误=>{
console.log（错误）；
});
document.title=“止痛和按摩服务-LA治疗”；
}//组件安装
replaceStr（str，newStr）{
return str=str.replace（str，newStr）；
}
render（）{
让pageRender；
if（this.state.loading）{
pageRender=正在加载。。。
}否则{
{this.state.services.map（services=>{
让backgroundUrl={}；
让imgUrl=services.serviceImage；
imgUrl=imgUrl.replace（“/react \-site\/public/g”，”）；//此字符串replace无效
console.log（imgUrl）；
if（services.serviceImage）{
背景URL={
背景图片：`url（${imgUrl}）`，
背景尺寸：“封面”
};
}否则{
背景URL={
背景图片：“url（./images/ui/add image-wide.png）”，
背景尺寸：“封面”
};
pageRender=
{this.state.services.map（services=>
{services.name}
)}
}
})
}
}
返回(
{pageRender}
);
}
}
导出默认服务页面；

使用该属性后，您会查看该属性是否有效

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

或者，如果出于某种原因需要在if之外使用imgUrl，则将其设置为空字符串

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

---

在实际呈现它们之前，您可以先检查

this.state.services

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

---

可能imageUrl最初未定义，请尝试使用字符串检查变量是否为字符串。代码如下所示：

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

---

将您

imgUrl.replace（…）

放入

if（services.serviceImage）

语句中。 在某些情况下，

services.serviceImage

有一个未定义的值，您得到的错误是因为这个值

...

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

}

...

---

必须避免使用未定义的值更改状态。您正在获取和未定义的值，并将其设置为状态。您的状态将被更改，并在未定义的值上呈现。首先，您必须检查

services.serviceImage

是否有值，然后将该值设置为状态。其次，对所有代码执行

if

语句，以确保在真实值上运行代码

该错误告诉您在调用

replace（）

之前，

imgUrl

未定义。您需要添加

console.log（）

调用来找出原因。我建议检查

this.state.services

以确保每个元素都有

serviceImage

。有关调试代码的更多提示，请阅读。请在console.log（imgUrl）所在的位置添加

services.serviceImage

的字符串值。对象返回9个未定义值，3个带值。这可能是问题吗？

...

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

}

...