调用TMDB API获取即将上映电影时出现Cannot read properties of undefined错误

问题根源 #

1. 初始状态判断失效：你把upcomingMovies的初始值设为空数组[]，而空数组在JS中是真值，所以!upcomingMovies永远为false，加载状态提示根本不会显示，导致组件在数据加载完成前就尝试读取upcomingMovies[0].poster_path。
2. API URL格式错误：请求URL里用了两个?分隔参数（page=1?api_key），这会导致api_key参数不被正确识别，可能返回空数据或错误响应，进而让response.results为空或undefined。
3. 缺少层级安全校验：即使数据加载完成，upcomingMovies[0]也可能是undefined（比如API返回的结果为空），直接读取它的poster_path会报错。

修复方案 #

1. 调整初始状态与加载判断

把初始状态设为null，这样就能通过!upcomingMovies正确判断加载状态；或者保持空数组，改用upcomingMovies.length === 0来判断数据是否未加载完成。

2. 修正API请求URL

将URL中的第二个?改成&，因为URL中第一个参数用?，后续所有参数都要用&分隔：

fetch(`https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1&api_key=${process.env.REACT_APP_MOVIE_KEY}`, options)

3. 添加多层安全校验

在渲染图片前，先确认upcomingMovies有数据，且upcomingMovies[0]和poster_path存在，避免读取undefined的属性。

修改后的完整代码 #

import React from "react";
import { useState, useEffect } from "react";

const HeroSection = () => {
  // 初始状态设为null，用于判断加载中状态
  const [upcomingMovies, setUpcomingMovies] = useState(null);

  const getUpcomingMoviestoFeature = () => {
    const options = {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: 'Bearer authorizationkeynumber'
      }
    };

    // 修正URL参数分隔符
    fetch(`https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1&api_key=${process.env.REACT_APP_MOVIE_KEY}`, options)
      .then(response => response.json())
      .then(response => setUpcomingMovies(response.results))
      .catch(err => {
        console.error(err);
        // 可以在这里设置错误状态，给用户显示错误提示
        setUpcomingMovies([]);
      });
  };

  useEffect(() => {
    getUpcomingMoviestoFeature();
  }, []);

  // 加载中状态
  if (!upcomingMovies) {
    return <p>Loading</p>;
  }

  // 无数据状态
  if (upcomingMovies.length === 0) {
    return <p>No upcoming movies available</p>;
  }

  // 确保数据存在后再渲染
  return (
    <div className="heroSection">
      <section className="light hero">
        <div className="heroInner">
          <img 
            src={`https://image.tmdb.org/t/p/w500/${upcomingMovies[0].poster_path}`} 
            alt={upcomingMovies[0].original_title || 'Upcoming Movie'}
          />
        </div>
      </section>
    </div>
  );
};

export default HeroSection;

额外优化建议 #

• 给图片添加alt属性，提升页面可访问性
• 在catch块中添加错误状态处理，给用户显示友好的错误提示
• 如果poster_path可能为null，可以设置默认图片地址，避免图片加载失败：

  src={`https://image.tmdb.org/t/p/w500/${upcomingMovies[0].poster_path || '/path/to/default-image.jpg'}`}
  

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