React组件首次获取props正常，页面刷新后读取属性报undefined如何解决

React组件的同步渲染优先级高于异步接口请求：
页面刷新后组件初始化时，movieInfo是constructor中定义的空数组，此时this.state.movieInfo[0]的值为undefined，直接将undefined传递给Movie组件后，组件内部读取props.movie.original_title相当于读取undefined的属性，自然会抛出对应类型错误。
首次编译运行正常是因为开发环境热重载时会保留之前的组件state，movieInfo已经有接口返回的数据，不会触发报错。

有三种常用的修复方案，任选其一即可：

• 方案1：App组件内增加条件渲染，仅当movieInfo有数据时才渲染Movie组件，否则展示加载提示

return (
  <div>
    {this.state.movieInfo.length ? <Movie movie={this.state.movieInfo[0]} /> : <p>电影信息加载中...</p>}
  </div>
);

• 方案2：Movie组件内使用可选链操作符规避属性读取错误

return (
    <div>
        <h1>{props.movie?.original_title}</h1>
        <p>{props.movie?.overview}</p>
    </div>
)

• 方案3：给Movie组件的movie参数设置默认空对象，从源头避免undefined读取问题

// 函数组件参数默认值写法
function Movie({ movie = {} }) {
  return (
    <div>
      <h1>{movie.original_title}</h1>
      <p>{movie.overview}</p>
    </div>
  )
}

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