React中嵌套Promise后如何提取Promise内的纯对象？

你的核心问题是没有等待所有电影请求的Promise完成就更新状态，导致setMovies接收的是一组未解析的Promise，而非最终的电影对象。

问题原因 #

movieUrls.map(...)会返回一个Promise数组，但这些Promise仍在异步执行中，直接将这个数组传递给setMovies，状态中就会存储Promise实例，而非解析后的对象。

修改后的代码 #

链式Promise写法

Promise.all([getStarships(user)])
  .then((result) => result[0][starshipIndex].films)
  .then((movieUrls) => {
    // 用Promise.all等待所有getMovies请求完成
    return Promise.all(
      movieUrls.map((movieUrl) => 
        getMovies(movieUrl).then((data) => data[0])
      )
    );
  })
  .then((movieList) => setMovies(movieList))
  .catch((error) => console.warn(error))

Async/Await写法（更易读）

// 需在async函数内执行
try {
  const starshipsResult = await Promise.all([getStarships(user)]);
  const movieUrls = starshipsResult[0][starshipIndex].films;
  const movieList = await Promise.all(
    movieUrls.map(movieUrl => getMovies(movieUrl).then(data => data[0]))
  );
  setMovies(movieList);
} catch (error) {
  console.warn(error);
}

关键说明 #

Promise.all()会接收一个Promise数组，等待所有Promise都成功解析后，返回一个包含所有结果的数组。此时传递给setMovies的就是你需要的纯电影对象数组，而非Promise实例。

内容的提问来源于stack exchange，提问作者Danko Grgić