React应用API响应为空及'items'属性未定义问题排查

1. 最直接的错误：Videos组件传参错误 #

你的Feed.js里，<Videos videos={[]} />硬编码传了空数组，而非将state中的videos传递过去。这会导致无论API请求是否成功，Videos组件都只能拿到空数组。

修复代码：

// Feed.js 中替换对应的行
<Videos videos={videos}/> 

2. 缺失错误捕获，无法定位请求失败原因 #

当前fetchFromAPI没有错误处理逻辑，Axios请求失败时会直接抛出异常，导致then回调不执行，videos始终保持初始空数组状态。同时useEffect里也没有处理异步错误，无法在控制台看到具体报错信息。

修改fetchFromAPI.js，增加错误捕获：

import axios from 'axios';

const BASE_URL = 'https://youtube-v31.p.rapidapi.com';

const options = {
  params: {
    maxResults: '50'
  },
  headers: {
    'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
    'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
  }
};
 
export const fetchFromAPI = async (url) => {
  try {
    const response = await axios.get(`${BASE_URL}/${url}`, options); 
    console.log('API响应数据:', response.data);
    return response.data;
  } catch (error) {
    // 打印详细错误信息，方便排查
    console.error('API请求失败:', error.response?.data || error.message);
    throw error; // 抛出错误让上层处理
  }
}

修改Feed.js中的useEffect，处理异步错误：

useEffect(() => {
  const loadVideos = async () => {
    try {
      const data = await fetchFromAPI(`search?part=snippet&q=${selectedCategory}`);
      // 确保data.items存在，避免报错
      setVideos(data.items || []);
    } catch (err) {
      console.error('加载视频列表失败:', err);
      setVideos([]);
    }
  };

  loadVideos();
}, [selectedCategory]);

3. 验证环境变量是否正确加载 #

• 确认.env文件中变量名严格遵循REACT_APP_前缀（Create React App要求），且没有多余空格：

  REACT_APP_RAPID_API_KEY=你的实际RapidAPI密钥
  

• 修改.env后必须重启开发服务器，否则新的环境变量不会生效。
• 可以在fetchFromAPI中临时打印环境变量，确认是否正确注入：

  console.log('RapidAPI密钥:', process.env.REACT_APP_RAPID_API_KEY);
  

4. 核对Rapid API权限与请求参数 #

• 确认你的RapidAPI账号已订阅该YouTube API套餐，且密钥处于有效状态（可在RapidAPI控制台查看）。
• 检查请求的接口参数是否符合文档要求：比如search接口的part参数是否正确，是否遗漏了必要参数。

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