React中访问tMDB API对象属性及解决渲染undefined报错问题

兄弟，你猜的完全没错！这个问题就是React初始渲染时状态未定义/未就绪导致的两次渲染差异。

问题原因拆解 #

• 组件挂载后，你发起的tMDB API请求是异步操作，这时候this.state.movie还处于初始状态（大概率是undefined或者空值）。第一次渲染时直接访问this.state.movie[1].id，相当于在undefined上取[1]再取id，自然抛出Cannot read property 'id' of undefined。
• 而你只写this.state.movie[1]时，第一次渲染它是undefined，但因为没有继续访问子属性，所以不会触发报错；等API请求完成、状态更新后第二次渲染，数据到位了就能显示完整对象。

解决方案 #

方案1：初始化状态时给movie设默认空数组

在组件的状态初始化环节，把movie设为空数组，避免初始状态是undefined：

constructor(props) {
  super(props);
  this.state = {
    movie: [] // 初始化为空数组，而非undefined
  };
}
// 或者用函数组件的 useState
const [movie, setMovie] = useState([]);

方案2：渲染时做安全的空值校验（推荐）

用ES2020+的可选链操作符，它会自动在遇到undefined/null时停止访问，避免报错：

// 安全访问id属性，不存在时返回undefined
this.state.movie[1]?.id

如果你的项目不支持可选链，也可以用条件判断兜底：

// 先判断数组长度足够，再访问id
this.state.movie.length > 1 ? this.state.movie[1].id : null

方案3：条件渲染子组件

在传递ID给子组件前，先确保数据已经就绪，只有当movie数组长度足够时才渲染子组件：

{this.state.movie.length > 1 && (
  <ChildComponent movieId={this.state.movie[1].id} />
)}

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