Estoy tratando de generar una lista de películas favoritas basada en la lista de usuarios que iniciaron sesión. El flujo es el siguiente:

1. Tengo ID de películas favoritas en firebase DTB para cada usuario
2. El usuario visita la página de "favoritos" y se actualiza la colección de películas favoritas
3. Luego, se llama a la llamada API para movieDB para que cada película represente la lista de películas.

Desafortunadamente, pude actualizar la matriz de objetos solo a través de push, lo que resultó en llamar a setContent(items) para cada elemento, lo que significa que la variable de content existe incluso con la primera iteración, dejando la opción de representar el div de "tendencia" como valor es verdad no mostrar el contenido completo.

¿Cómo puedo refactorizar el useEffect ? ¿Cambiar las condiciones de representación para "Tendencia" para asegurarse de que todos los valores en la variable de content hayan terminado de actualizarse a través de la API?

 const Favorite = () => { const { user } = useAuthContext(); const { documents: movies } = useCollection("favMovies", ["uid", "==", user.uid]); // only fetch movies for loged user const [page, setPage] = useState(1); const [content, setContent] = useState([]); const [numOfPages, setNumOfPages] = useState(); useEffect(() => { const items = []; movies && movies.forEach(async (movie) => { try { const response = await axios.get( `https://api.themoviedb.org/3/${movie.mediaType}/${movie.id}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US` ); items.push(response.data); setContent(items); } catch (error) { console.error(error); } }); }, [movies]); return ( <div> <span className="pageTitle">Trending</span> <div className="trending"> {content && content.map((con) => ( <SingleContent key={con.id} id={con.id} poster={con.poster_path} title={con.title || con.name} date={con.first_air_date || con.release_date} mediaType={con.media_type} voteAverage={con.vote_average} /> ))} </div> <CustomPagination setPage={setPage} /> </div> ); }; export default Favorite;