在产品下显示视频数组 - 数据映射切片 javascript firebase 集合：数据显示为空数组 []答案

【问题标题】：Displaying an Array of Videos under a Product - data map slice javascript firebase collection: Data showing as empty array []在产品下显示视频数组 - 数据映射切片 javascript firebase 集合：数据显示为空数组 []
【发布时间】：2021-12-20 09:37:29
【问题描述】：

我正在尝试从嵌套在字段 videoURL 下的产品下的数组中检索切片或一些数据。

我认为要么我使用了错误的 React Hooks，要么使用了错误的 useEffect。

 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} />
                );
              })}
            />

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore firebase-storage

【解决方案1】：

在玩过 Reactiflux discord 和 Firebase Developers Discord 之后，我能够从每个 productID 的 videoURL 中获取我的评论视频列表，并根据每个产品的 ID 在每个产品页面上显示它们。

对于其他尝试显示用户生成的产品视频 Blob 评论的人来说，这可能是一个类似的模型，方法是将视频 Blob 放在他们自己的集合中的产品下。

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>
)

【讨论】：