构建Netflix克隆项目时Banner.js出现AxiosPromise错误及显示问题

错误根源拆解 #

1. 未捕获请求异常：fetchData里的Axios请求没加错误处理，一旦请求失败（比如API地址错、密钥无效、跨域限制），就会抛出未捕获的Promise错误。
2. 索引计算逻辑错误：Math.floor(Math.random() * request.data.results.length -1)的运算顺序有问题，可能生成负数索引；如果results是空数组，直接访问索引会直接报错。
3. 初始状态类型不匹配：movie初始值设为数组[]，但实际应该是单个电影对象，这会导致后续可选链判断出现异常。

修复方案 #

1. 给请求加异常捕获 #

修改fetchData函数，用try/catch包裹请求逻辑，出错时能定位问题：

useEffect(() => {
  async function fetchData() {
    try {
      const request = await axios.get(requests.fetchNetflixOriginals);
      // 后续赋值逻辑
    } catch (error) {
      console.error("拉取电影数据失败:", error);
    }
  }
  fetchData();
}, []);

2. 修正随机索引计算逻辑 #

调整索引计算方式，避免负数，同时处理空数组情况：

setMovie(() => {
  const results = request.data.results;
  if (results.length === 0) return null;
  // 先算数组长度，再乘随机数取整，确保索引合法
  const randomIndex = Math.floor(Math.random() * results.length);
  return results[randomIndex];
});

3. 修正初始状态类型 #

把movie初始值改成null，匹配单个电影对象的预期：

const [movie, setMovie] = useState(null);

4. 完善渲染容错 #

确保movie为空时Banner不会出现样式或内容异常：

return (
  <header className="banner" style={{
    backgroundSize: "cover",
    backgroundImage: movie ? `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")` : "none",
    backgroundPosition: "center center"
  }}>
    <div className="banner__contents">
      {movie && (
        <h1>{movie.title || movie.name || movie.original_name}</h1>
      )}
    </div>
  </header>
);

额外验证项 #

• 检查requests.js里的fetchNetflixOriginals地址是否正确，必须包含有效的TMDB API密钥，格式示例："https://api.themoviedb.org/3/discover/tv?api_key=你的密钥&with_networks=213"
• 本地开发时如果遇到跨域问题，可在React项目中配置代理，或者确认TMDB API是否允许当前域名访问。

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