React 中的 Promise.all API 数据解构问题

如何解决React 中的 Promise.all API 数据解构问题

我正在尝试制作一个与 Netlix 具有类似 UI 的电影评论数据库。我正在使用 Promise.all 获取请求，因此我可以获得热门电影、热门电影等的数据。

一旦我收到所有数据，我想将其添加为带有嵌套对象的数组，但我很难正确设置它，以便我可以使用特定的动态显示带有电影的轮播来自州的数据。

const Main = () => {
    
    const [ currentPage,setCurrentPage ] = useState('Trending');

    const [ trendingData,setTrendingData ] = useState([]);

    useEffect(() => {

        Promise.all([
            fetch(`https://api.themoviedb.org/3/trending/all/day?api_key=${movieDBAPI}`),fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${movieDBAPI}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&Vote_count.gte=7&with_watch_monetization_types=flatrate`),fetch(`https://api.themoviedb.org/3/trending/movie/week?api_key=${movieDBAPI}`),fetch(`https://api.themoviedb.org/3/trending/tv/week?api_key=${movieDBAPI}`)                                                          
          ]).then( async res => {

            const trendingRes = await res[0].json();
          //  const recommendedRes = await res[1].json();
         //   const movieRes = await res[2].json();
         //  const tvRes = await res[3].json();


            setTrendingData([{
                action: trendingRes.results.filter(mov => mov.genre_ids.includes(28)),adventure: trendingRes.results.filter(mov => mov.genre_ids.includes(12)),comedy: trendingRes.results.filter(mov => mov.genre_ids.includes(35)),drama: trendingRes.results.filter(mov => mov.genre_ids.includes(18)),horror: trendingRes.results.filter(mov => mov.genre_ids.includes(27)),romance: trendingRes.results.filter(mov => mov.genre_ids.includes(10749)),documentary: trendingRes.results.filter(mov => mov.genre_ids.includes(99)),thriller: trendingRes.results.filter(mov => mov.genre_ids.includes(53)),family: trendingRes.results.filter(mov => mov.genre_ids.includes(10751))  
            }]);


          }).catch((err) => {
              console.log('error fetching ',err);
          });

    },[])

我必须过滤结果以使用 mov.genre.id 提取所需的流派。我觉得我的设置方式犯了一个愚蠢的错误，我无法弄清楚我做错了什么。

我正在使用 React-multi-carousel，我希望能够根据类型（动作、冒险等）显示每个轮播。类似的东西：

return (
        <div className='main-container'>
            <Sidebar setCurrentPage={setCurrentPage}/>
            <Search />
             <div className='movie-db-container'>
                <h1 className='main-title'>{currentPage}</h1> 
                <h3 className='genre-title'>Action</h3> 
          

                  { trendingData.action.map(item => (
                    <Carousel>
                            <img src={item.url} />
                            <h3 className='movie-title'>{item.title}</h3>
                            <p className='movie-description'>{item.description}</p>
                    </Carousel>
                    ))
        }

    
            </div>
        </div>
    )
}

export default Main