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

Posted 2023-03-22

【中文标题】在产品下显示视频数组 - 数据映射切片 javascript firebase 集合：数据显示为空数组 []

【英文标题】：Displaying an Array of Videos under a Product - data map slice javascript firebase collection: Data showing as empty array []

【发布时间】：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
                    
                    
                    controls
                    muted
                    loop
                    key=pos  ...configProduct />
                );
              )
            />

【参考方案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
                    
                    
                    controls
                    muted
                    loop
                    key=pos  ...configProduct />

                );
              )
</div>
)