我无法弄清楚为什么我的组件的Render函数内部的replace函数出错。
TypeError:无法读取未定义的属性“替换”
我只是想替换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;
您查看使用后该属性是否有效
let imgUrl = services.serviceImage; <-- read it
imgUrl = imgUrl.replace(...) <-- where the error occurs
if (services.serviceImage) { <-- is truthy
因此,将逻辑移到检查中
let imgUrl = services.serviceImage;
if (services.serviceImage) {
imgUrl = imgUrl.replace(...)
或将其设置为空字符串(如果出于某种原因需要在if之外使用imgUrl)
let imgUrl = services.serviceImage || '';
imgUrl = imgUrl.replace(...)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句