我不明白为什么我的组件的渲染函数中的替换函数出现错误。
类型错误:无法读取未定义的属性“替换”
我只是尝试替换 services.serviceImage 中的字符串值,并替换像 "react-site/public/","" 这样的字符串,就像通常对任何字符串所做的那样,我做了一些测试,我可以确认返回的值是一个字符串,我做了一些其他字符串替换,它起作用了,但在这种情况下有些东西不起作用......为什么?
我已经尝试过作为正则表达式方法,但没有成功:
imgUrl = imgUrl.replace("/react\-site\/public/g", "");
由于某种原因,我的 Node 服务器也不接受 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(...)
关于javascript - react 类型错误: Cannot read property 'replace' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52669253/