属性值在reactJS render方法中未定义

如何解决属性值在reactJS render方法中未定义

我正在尝试构建一个简单的react类，该类在渲染时会根据其从其父组件通过props接收的图像路径返回标题和图像。

每次我尝试访问属性this.props.eImage（本地图像路径）时，该属性的值都是未定义的，如eImage中一样：前两个renders均为undefined（组件由于未知原因被渲染4次）。我可以访问该属性，但由于某种原因无法访问其值。

这将导致render方法抛出错误“找不到模块'undefined'。

我尝试使用诸如getDerivedState和component willRecieveProps之类的生命周期方法来首先将图像路径存储为状态，然后在渲染中使用它，但无济于事，两者的结果相同。

这非常令人沮丧，因为这是一个简单的任务，但我无法使其正常工作。请帮忙。缩短的代码是：

父母：

import React,{Component} from 'react';
import Title from './Title/Title.js';
import Description from './Description/Description.js';
import OrderSection from './OrderSection/OrderSection.js';
import './excursionStyle.css';

const excursionList = [
  {
    excTitle : "Музейный Дрезден",excDescription: `Дрезденская картинная галерея,как всегда,радует :)`} 
  ]

class Excursion extends Component {
    constructor(){
        super();
        this.state = {
        };
      };

    getCurrentIndex = (name) => {
      return excursionList.find(exc =>
        exc.excTitle === name
      )
    }

  componentDidMount() {   
      const currentExcursion = this.getCurrentIndex(this.props.match.params.name);
      this.setState(currentExcursion);
    };
    
    render(){    
      return (
          <div className="body">
            <div className="excursion">
            <Title eTitle={this.state.excTitle} eImage={this.state.excImageUrl}/>
                <Description eDescription = {this.state.excDescription}/>
                <OrderSection eTitle = {this.state.excTitle}/>
          </div>
          </div>
            );
    }
        
}

孩子：

import React,{Component} from 'react';
import './Title.css';

class Title extends Component{
    constructor(props){
        super(props);     
    }
    render() {  
        console.log(this.props)
        return (
            <div>
            <header className = "flex">
                <p className = "f2 b">{this.props.eTitle}</p>
            </header>
            <div>
                    <img src={require(this.props.eImage)}></img>                                                                      
            </div>
            </div>    
        );
    }
}

export default Title;

解决方法

您的Excursion组件以以下状态开头：

this.state = {
};

这意味着当渲染Title时，使用this.state.excImageUrl会访问状态对象上不存在的属性，从而得到值undefined。因此，您的Title组件会看到eImage的值为undefined。

如果Title需要该属性，则无需渲染Title，直到拥有它为止。通常是用某种警卫来完成的，例如（在Excursion中）：

render(){    
  const eImage = this.state.excImageUrl;
  return (
      <div className="body">
        <div className="excursion">
        {eImage && <Title eTitle={this.state.excTitle} eImage={eImage}/>
            <Description eDescription = {this.state.excDescription}/>
            <OrderSection eTitle = {this.state.excTitle}/>
        }
      </div>
      </div>
        );
}

请注意{eImage && <Title ... />}结构，它是保护结构。 React忽略表达式占位符，其表达式值ID为undefined或null或false，因此，如果eImage为undefined，{eImage && <Title ... />}将为{{1 }}（将不使用undefined）。但是，如果Title是非空白字符串（例如），则eImage会生成{eImage && <Title ... />}。

关于以下内容的注释：

...组件由于未知原因渲染了4次...

Title的编写方式将始终至少两次以呈现：一次在Excursion上没有任何内容，然后在state以后再次渲染。状态更新。每当它的道具改变时，它也会被渲染，因此，如果（例如）它的父组件给它一个componentDidMount值作为开始，但随后又用另一个更新，那么它可能会渲染三遍。如果父组件一次多次更新match ...

通过在首次渲染前设置Excrusion状态来解决该问题（使用componentWillMount）。非常感谢您的回答。