React中跨API传参调用报错：无法读取undefined的id属性

错误原因 #

你遇到的TypeError: cannot read property 'id' of undefined是因为异步操作顺序错误：

• 你同时调用了TrendingMovies()和MovieDetail()，但TrendingMovies的API请求还没返回数据时，MovieDetail就已经尝试读取MovieList[0].id。此时MovieList还是初始的空数组，MovieList[0]为undefined，自然无法读取id属性。
• 另外React的setState是异步更新的，即便TrendingMovies的请求立刻完成，setMovieList也不会同步更新MovieList的值，后续调用MovieDetail依然拿不到最新数据。

解决方案 #

提供两种可行的修改方案：

方案1：合并异步操作，按顺序执行 #

将两个API请求合并到同一个异步函数中，确保先获取到热门电影数据后，再请求详情：

const [MovieList, setMovieList] = useState([]);

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'placeholder' // actual token redacted
  }
};

useEffect(() => {
  const fetchMovieData = async () => {
    try {
      // 第一步：获取热门电影数据
      const trendingRes = await fetch('https://api.themoviedb.org/3/trending/movie/day?language=en-US', options);
      const trendingData = await trendingRes.json();
      const topMovie = trendingData.results.slice(0, 1);
      setMovieList(topMovie);

      // 第二步：确认有数据后请求详情
      if (topMovie.length > 0) {
        const detailRes = await fetch(`https://api.themoviedb.org/3/movie/${topMovie[0].id}?language=en-US`, options);
        const detailData = await detailRes.json();
        console.log(detailData);
      }
    } catch (err) {
      console.error('请求出错:', err);
    }
  };

  fetchMovieData();
}, []);

方案2：监听状态变化，触发详情请求 #

通过第二个useEffect监听MovieList的变化，当热门电影数据更新后自动请求详情：

const [MovieList, setMovieList] = useState([]);

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'placeholder' // actual token redacted
  }
};

// 第一步：获取热门电影数据
useEffect(() => {
  const getTrendingMovies = async () => {
    try {
      const res = await fetch('https://api.themoviedb.org/3/trending/movie/day?language=en-US', options);
      const data = await res.json();
      setMovieList(data.results.slice(0, 1));
    } catch (err) {
      console.error('热门电影请求出错:', err);
    }
  };

  getTrendingMovies();
}, []);

// 第二步：当MovieList更新时，请求电影详情
useEffect(() => {
  const getMovieDetail = async () => {
    // 没有数据时直接返回，避免报错
    if (MovieList.length === 0) return;

    try {
      const res = await fetch(`https://api.themoviedb.org/3/movie/${MovieList[0].id}?language=en-US`, options);
      const detailData = await res.json();
      console.log(detailData);
    } catch (err) {
      console.error('电影详情请求出错:', err);
    }
  };

  getMovieDetail();
}, [MovieList]); // 依赖MovieList，状态变化时触发

额外注意事项 #

• 始终在异步操作中添加try/catch捕获错误，避免请求失败导致应用崩溃。
• 访问数组元素前先判断数组长度，确保数据存在后再读取属性，防止类似的undefined报错。

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