React TypeError：无法读取未定义的属性“替换”答案

【问题标题】：React TypeError: Cannot read property 'replace' of undefinedReact TypeError：无法读取未定义的属性“替换”
【发布时间】：2018-10-06 00:08:28
【问题描述】：

我无法弄清楚为什么我的组件的 Render 函数中的替换函数会出错。

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;

【问题讨论】：

错误告诉你 imgUrl 在你调用 replace() 之前是未定义的。您需要添加console.log() 电话以找出原因。我建议检查this.state.services 以确保每个元素都有serviceImage。有关调试代码的更多提示，请阅读ericlippert.com/2014/03/05/how-to-debug-small-programs。
能否将services.serviceImage 的字符串值添加到console.log(imgUrl) 的位置？
对象返回 9 undefined 和 3 with value 可能是问题吗？

标签： javascript node.js reactjs

【解决方案1】：

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

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(...)

【讨论】：

【解决方案2】：

在实际渲染它们之前，您可以先检查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);

【讨论】：

【解决方案3】：

也许 imageUrl 最初是未定义的，尝试使用字符串检查变量是否为字符串。代码如下：

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

【讨论】：

【解决方案4】：

将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 语句包裹在您的所有代码上，以确保您将在真实值上运行您的代码。

【讨论】：