React组件render()中props属性值undefined问题求助

API 探路者

2026-5-8

解决React类组件中props传递图片路径为undefined的问题

我仔细看了你的代码，发现几个核心问题导致了你遇到的Cannot find module 'undefined'错误，以及组件多次渲染时eImage始终为undefined的情况：

问题根源拆解

初始渲染时state为空，子组件拿到无效值
父组件的componentDidMount是在第一次render执行完毕后才触发的，所以前两次渲染（初始挂载渲染 + 后续state更新触发的渲染）时，this.state还是空对象，传给Title组件的eImage自然是undefined。这时候调用require(undefined)就会直接抛出找不到模块的错误。
数据源缺失图片路径字段
你定义的excursionList数组里的对象只有excTitle和excDescription，完全没有excImageUrl字段！就算getCurrentIndex找到了对应的项，setState(currentExcursion)之后，this.state里也不会凭空多出excImageUrl属性，所以后续渲染时eImage依然是undefined。

分步解决方案

1. 补全数据源的图片路径字段

先给excursionList里的对象补上正确的本地图片路径，比如：

const excursionList = [
 { 
   excTitle : "Музейный Дрезден", 
   excDescription: `Дрезденская картинная галерея, как всегда, радует :)`,
   excImageUrl: "./images/dresden-museum.jpg" // 替换成你实际的本地图片路径
 }
]

2. 子组件添加空值判断，避免报错

在Title组件的render方法里，先判断eImage是否存在，再执行require，同时给标题加个加载态提示：

render() {
 console.log(this.props)
 // 只有当eImage存在时才加载图片，否则用空字符串或默认图占位
 const imageSrc = this.props.eImage ? require(this.props.eImage) : "";
 return (
   <div>
     <header className = "flex">
       <p className = "f2 b">{this.props.eTitle || "加载中..."}</p>
     </header>
     {/* 图片存在时才渲染img标签 */}
     {this.props.eImage && (
       <div>
         <img src={imageSrc} alt={this.props.eTitle}></img>
       </div>
     )}
   </div>
 );
}

3. 优化父组件的初始状态与逻辑

给父组件的state设置初始默认值，避免初始渲染时传递undefined的props：

constructor(){
 super();
 this.state = { 
   excTitle: "",
   excDescription: "",
   excImageUrl: ""
 };
};

另外，考虑到React Router的match.params.name可能为空的情况，在componentDidMount里加个判断：

componentDidMount() {
 const excursionName = this.props.match.params.name;
 // 如果没有拿到路由参数，直接返回
 if (!excursionName) return;
 const currentExcursion = this.getCurrentIndex(excursionName);
 // 找到对应数据再更新state
 if (currentExcursion) {
   this.setState(currentExcursion);
 }
};

关于组件多次渲染的说明

React组件会在初始挂载、state更新、props更新、父组件渲染等多种场景下触发重渲染，你看到的4次渲染属于正常的生命周期流程。只要我们处理好空值情况，就不会影响功能。

内容的提问来源于stack exchange，提问作者Fedor Stryapunin