javascript - React TypeError:无法读取未定义的属性“替换”
问题描述
我无法弄清楚为什么我的组件的渲染函数中的替换函数出现错误。
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(...)
推荐阅读
- python - 在 BigQuery 中使用 python 输入数据
- python - Django AttributeError:'function'对象在urls.py中没有属性'as_view'
- java - NiFi XMLReader 记录组件有时会忽略空 XML 元素
- android - 固定在 ScrollView 和 Constraintlayout 中的浮动操作按钮
- python - nginx ""地址已被使用""
- java - 为什么我在这段代码中得到 InputMismatchException?
- c# - 在unity3d中使用touchphase时刚体.moveposition不起作用
- javascript - 使用带有 React 组件的 insertAdjacentHTML
- linux - 如何在vim中更改整个文档中相同单词的大小写?
- php - 如何在 Woocommerce 中删除特定产品的销售价格?