React报错Cannot read properties of undefined(reading 'imageUrl')如何解决

• 该报错核心是首次渲染阶段selectedMovie或其内部的moviePoster属性为undefined：你的selectedMovie大概率是父组件通过异步请求获取的数据，组件第一次渲染时异步请求还没返回结果，此时你直接读取moviePoster.imageUrl就会触发空指针报错。
• 控制台打印的对象看起来有值是因为浏览器控制台打印对象为引用类型，你点击展开查看的时候异步请求已经返回、对象已经被赋值，和首次渲染时的状态不一致。
• 其他属性可以正常访问，大概率是你给selectedMovie设置的初始值里有name、description这些字段的默认值，但没给moviePoster设置默认的空对象；列表页可以正常访问是因为列表是等所有数据加载完成后才执行map遍历渲染，每一项的moviePoster都是完整存在的。

以下是三种常用的可落地解决方法：

1. 使用可选链操作符（最便捷）
   直接把img标签的src属性改为可选链写法，属性不存在时会自动返回undefined，不会触发报错：

<img src={props.selectedMovie?.moviePoster?.imageUrl} height={"540px"}></img>

如果你的项目不支持ES2020的可选链语法，可以用&&短路求值实现同等效果：

<img src={props.selectedMovie && props.selectedMovie.moviePoster && props.selectedMovie.moviePoster.imageUrl} height={"540px"}></img>

2. 增加条件渲染逻辑
   在组件渲染前先判断moviePoster是否存在，不存在时先渲染加载占位符，避免空值访问：

const movieDetailsWithScheduledMovies = (props) => {
    // 新增判断逻辑
    if(!props.selectedMovie?.moviePoster) {
        return <div>加载中...</div>
    }
    // 原有return渲染逻辑保持不变
    return (...)
}

3. 给props设置默认值
   给组件的selectedMovie prop设置兜底默认值，保证moviePoster始终是对象类型：

movieDetailsWithScheduledMovies.defaultProps = {
    selectedMovie: {
        name: '',
        genre: '',
        description: '',
        moviePoster: {},
        trailerUrl: ''
    }
}

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