React调用The Movie DB API报错：TypeError: Cannot read property '0' of null

这个TypeError: Cannot read property '0' of null错误的原因很清晰，咱们一步步拆解问题并给出修复方案：

核心问题分析 #

1. 初始渲染时的空值访问
   你的组件初始state里把popularMovies设为了null，但组件第一次渲染时，异步请求还没完成，this.state.popularMovies仍然是null，这时候直接访问null[0].title必然报错——null不是数组，无法读取索引属性。

2. 未触发数据获取方法
   你定义了retrievePopularMovies这个异步请求方法，但从来没有调用它！组件挂载后不会自动执行这个方法，所以数据根本没从API拉取回来。

修复后的完整代码 #

我标注了关键改动点，同时满足你只展示4部电影的需求：

import React, {Component} from 'react';
import './App.css';

class App extends Component{
  // 改动1：初始state设为空数组，和API返回的results类型匹配
  state = { popularMovies: [] }

  // 改动2：用componentDidMount触发数据请求，组件挂载后立即执行
  componentDidMount() {
    this.retrievePopularMovies();
  }

  async retrievePopularMovies(){
    const url = 'https://api.themoviedb.org/3/movie/popular?api_key=KEY_HERE';
    try {
      // 改动3：添加try-catch捕获请求错误，方便排查问题
      const response = await fetch(url);
      const data = await response.json();
      // 改动4：直接截取前4部电影，满足展示需求
      this.setState({popularMovies: data.results.slice(0,4)});
    } catch (error) {
      console.error('获取电影数据失败:', error);
    }
  }

  render(){
    const { popularMovies } = this.state;
    return(
      <div>
        <h3>Popular Movies</h3>
        <div>
          {/* 改动5：条件渲染，确保有数据时再渲染内容 */}
          {popularMovies.length > 0 ? (
            popularMovies.map((movie) => (
              <div key={movie.id}>{movie.title}</div>
            ))
          ) : (
            <p>加载中...</p> // 数据未加载完成时的提示
          )}
        </div>
      </div>
    )
  }
}

export default App;

关键改动说明 #

• 初始state设为空数组：避免初始值为null导致的空值访问问题，同时和API返回的results数组类型保持一致。
• 使用componentDidMount触发请求：这是组件挂载后执行异步请求的最佳时机，确保组件渲染后立即开始获取数据。
• 添加错误捕获：如果API请求失败（比如密钥无效、网络问题），可以在控制台看到错误信息，方便快速排查。
• 条件渲染+数据截取：先判断数组长度，有数据时遍历展示前4部电影，无数据时显示加载提示，既解决了报错问题，也提升了用户体验。

注意：记得把代码里的KEY_HERE替换成你自己的TMDB API密钥，否则请求会失败哦。

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