reactJS render() 方法中未定义属性值答案

【问题标题】：Value of property is undefined in reactJS render() methodreactJS render() 方法中未定义属性值
【发布时间】：2020-08-30 11:51:09
【问题描述】：

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

每次我尝试访问属性 this.props.eImage（本地图像路径）时，该属性的值都是未定义的，如 eImage：前两次渲染的未定义（组件由于未知原因渲染了 4 次）。我可以访问该房产，但由于某种原因无法访问它的价值。

这会导致渲染方法抛出错误“找不到模块‘未定义’。

我尝试使用 getDerivedState 和组件 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;

【问题讨论】：

这些图片是否与您的文件夹相关？顺便说一句，你通过什么道具？

标签： javascript reactjs

【解决方案1】：

您的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 ... />} 将是 undefined（Title 不会被使用）。但是如果eImage 是一个非空字符串（例如），{eImage && <Title ... />} 会产生一个Title。

关于：

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

Excursion 的编写方式总是会至少渲染两次：一次在state 上没有任何内容，然后在componentDidMount 的状态更新后再次渲染。每次它的 props 改变时它也会被渲染，所以如果（例如）它的父组件给它一个 match 值开始，然后用另一个更新它，它可能会渲染 3 次。如果父组件多次更新match...

【讨论】：

【解决方案2】：

通过在第一次渲染之前设置 Excrusion 状态解决了这个问题（使用 componentWillMount）。非常感谢您的回答。

【讨论】：