React中JS文件导入与异步调用异常，无法获取正确影视认证字符串

在React项目中调用fetchCertification函数后，既未得到预期的影视认证字符串，还引发项目异常，以下是问题排查与修复方案：

相关代码 #

Certification.js #

const fetchCertification = async (type, id) => {
    if (type === "movie") {
      const { data } = await axios.get(
        `https://api.themoviedb.org/3/movie/${id}/release_dates?api_key=${
          import.meta.env.VITE_API_KEY
        }`
      );
      const filteredData = {
        id: data.id,
        results: data.results.map((x) => ({
          ...x,
          release_dates: x.release_dates.filter(
            (date) => date.certification !== ""
          ),
        })),
      };
      if (
        filteredData?.results?.find(({ iso_3166_1 }) => iso_3166_1 == "GB")
          ?.release_dates[0]?.certification ||
        filteredData?.results?.find(({ iso_3166_1 }) => iso_3166_1 == "US")
          ?.release_dates[0]?.certification !== undefined
      ) {
        return (
          filteredData?.results?.find(({ iso_3166_1 }) => iso_3166_1 == "GB")
            ?.release_dates[0]?.certification ||
            filteredData?.results?.find(({ iso_3166_1 }) => iso_3166_1 == "US")
              ?.release_dates[0]?.certification
        );
      } else {
        return false;
      }
    } else {
      const { data } = await axios.get(
        `https://api.themoviedb.org/3/tv/${id}/content_ratings?api_key=${
          import.meta.env.VITE_API_KEY
        }`
      );
      const filteredData = data?.results?.filter((x) => x.rating !== 0);
      if (
        filteredData?.find(({ iso_3166_1 }) => iso_3166_1 == "GB")?.rating ||
        filteredData?.find(({ iso_3166_1 }) => iso_3166_1 == "US")?.rating !==
          undefined
      ) {
        return (
          filteredData?.find(({ iso_3166_1 }) => iso_3166_1 == "GB")?.rating ||
            filteredData?.find(({ iso_3166_1 }) => iso_3166_1 == "US")?.rating
        );
      } else {
        return false;
      }
    }
  };

Home.jsx #

import {fetchCertification} from Certification.js;

const certificationData = fetchCertification(movie, 13453);
console.log(certificationData);

问题根源分析 #

1. 缺少函数导出：Certification.js中未添加export语句，导致Home.jsx无法正确导入函数。
2. 异步函数处理错误：fetchCertification是异步函数，直接调用返回的是Promise对象而非实际结果，未用await或.then()处理。
3. 导入路径语法错误：导入语句未用引号包裹路径，不符合ES模块语法规范。
4. 参数错误：调用时传入的movie是未定义变量，应为字符串'movie'。
5. 条件判断逻辑缺陷：A || B !== undefined的写法逻辑错误，会导致短路判断，无法正确检测B是否存在；且多次重复调用find，性能冗余。
6. 未捕获请求异常：axios请求未加try/catch，网络或API错误会直接抛出异常导致项目崩溃。

修复方案 #

1. 修正Certification.js #

添加导出语句，优化条件判断，增加异常捕获：

import axios from 'axios';

const fetchCertification = async (type, id) => {
  try {
    if (type === "movie") {
      const { data } = await axios.get(
        `https://api.themoviedb.org/3/movie/${id}/release_dates?api_key=${import.meta.env.VITE_API_KEY}`
      );
      const filteredData = {
        id: data.id,
        results: data.results.map((x) => ({
          ...x,
          release_dates: x.release_dates.filter((date) => date.certification !== ""),
        })),
      };
      // 提前获取GB/US认证，避免重复遍历
      const gbCert = filteredData?.results?.find(item => item.iso_3166_1 === "GB")?.release_dates[0]?.certification;
      const usCert = filteredData?.results?.find(item => item.iso_3166_1 === "US")?.release_dates[0]?.certification;
      
      return gbCert || usCert || false;
    } else {
      const { data } = await axios.get(
        `https://api.themoviedb.org/3/tv/${id}/content_ratings?api_key=${import.meta.env.VITE_API_KEY}`
      );
      const filteredData = data?.results?.filter(x => x.rating !== 0);
      const gbRating = filteredData?.find(item => item.iso_3166_1 === "GB")?.rating;
      const usRating = filteredData?.find(item => item.iso_3166_1 === "US")?.rating;
      
      return gbRating || usRating || false;
    }
  } catch (err) {
    console.error('获取认证信息失败:', err);
    return false;
  }
};

export { fetchCertification };

2. 修正Home.jsx #

修复导入路径，正确处理异步函数：

import { fetchCertification } from './Certification.js'; // 根据实际相对路径调整
import { useEffect } from 'react';

useEffect(() => {
  const getCertInfo = async () => {
    const certificationData = await fetchCertification('movie', 13453);
    console.log(certificationData);
  };
  getCertInfo();
}, []);

3. 额外检查 #

• 确认.env文件中已配置VITE_API_KEY，且值为有效的TMDB API密钥。
• 验证目标影视ID（13453）确实存在GB或US地区的认证/评级信息。

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