Estoy tratando de recuperar un segmento o algunos datos de una matriz anidada en un producto en el campo videoURL.
Creo que estoy usando React Hooks mal, o useEffect mal.
const [reviews, setReviews] = useState(); useEffect((productID) => { firestore .collection("products") .doc(productID) .collection("productReviewClips") .get() .then((snapshot) => { setReviews([ ...snapshot.docs.map((doc) => { return { ...doc.data(), documentID: doc.id, }; }), ]); }) console.log(reviews) }, [productID]); > {reviews.slice(0, 3).map((videoUrl, pos) => { const [] = videoUrl; const configProduct = { ...product, }; return ( <ReactPlayer playing={true} url={videoUrl} width="24%" height="100%" controls muted loop key={pos} {...configProduct} /> ); })} />Después de jugar con él, Reactiflux discord y Firebase Developers Discord, pude obtener mi lista de videos de revisión de las URL de video de cada ID de producto y mostrarlos en la página de cada producto de acuerdo con la ID de cada producto.
Este puede ser un modelo similar para otros que intentan mostrar reseñas de blobs de video generadas por usuarios de un producto colocando los blobs de video en su propia colección debajo de un producto.
useEffect(() => { firestore .collection("products") .doc(productID) .collection("productReviewClips") .get() .then((snapshot) => { setReviews([ ...snapshot.docs.map((doc) => { return { ...doc.data(), documentID: doc.id, }; }), ]); }) }, []); return ( <div> {reviews.map((documentID, pos) => { const {videoUrl} = documentID const configProduct = { ...documentID, }; return ( <ReactPlayer playing={true} url={videoUrl} width="24%" height="100%" controls muted loop key={pos} {...configProduct} /> ); })} </div> )