0

我以正常方式从 firebase 获取了一系列产品：

export const getUsersProducts = async uid => {
    const UsersProducts = []
    await db.collection('products').where("userID", "==", uid).get().then(snapshot => {
        snapshot.forEach(doc => UsersProducts.push(doc.data()))
    })
    return UsersProducts
}

并且获取的数组正常显示在dom中，但是当我尝试使用onSnapshot方法获取它时，即使出现在我的redux存储中并且当我控制台记录它时，它也没有显示在DOM上。

export const getUsersProducts = uid => {
    let UsersProducts = []
    db.collection('products').where("userID", "==", uid).onSnapshot(querySnapshot => {
        querySnapshot.docChanges().forEach(change => {
            if (change.type === "added") {
                UsersProducts.push(change.doc.data())
            }
        })
    })
    return UsersProducts
}

这是用于在 DOM 中显示它的代码

const MyProducts = () => {
    const CurrentUserInfos = useSelector(state => state.userReducer.currentUserInfos)
    const searchQuery = useSelector(state => state.productsReducer.searchQuery)
    const myProducts = useSelector(state => state.productsReducer.usersProducts)
    const dispatch = useDispatch()
    const settingUsersProductList = async () => {
        try {
        const usersProducts = getUsersProducts(CurrentUserInfos.userID)
        dispatch(setUsersProducts(usersProducts))
        console.log(myProducts)
        } catch (err) {
            console.log(err)
        }
    }
    useEffect(() => {
        settingUsersProductList()
    }, [CurrentUserInfos])
    return (
        <div className="my-products">
            <div className="my-products__search-bar">
                <SearchBar />
            </div>
            <div className="my-products__list">
                {
                    Object.keys(myProducts).length===0 ? (<Loading />) : (myProducts.filter(product => {
                        if(searchQuery==="")
                            return product
                        else if(product.title && product.title.toLowerCase().includes(searchQuery.toLowerCase())) 
                            return product
                    }).map(product => {
                        return(
                            <ProductItem
                                key={product.id}
                                product={product}
                            />
                        )
                    }))
                }
            </div>
        </div>
    )
}

export default MyProducts

4

1 回答 1

0

您在 promise 解决之前返回数组，因此它是空的。尝试这个：

export const getUsersProducts = async uid => {
    const snapshot = await db.collection('products').where("userID", "==", uid).get()
    const UsersProducts = snapshot.docs.map(doc => doc.data())
    return UsersProducts
}

对于 onSnapshot，在 onSnapshot 中添加 return 语句，

export const getUsersProducts = uid => {
    let UsersProducts = []
    return db.collection('products').where("userID", "==", uid).onSnapshot(querySnapshot => {
        querySnapshot.docChanges().forEach(change => {
            if (change.type === "added") {
                UsersProducts.push(change.doc.data())
            }
        })
        return UsersProducts 
    })
}
于 2021-07-23T15:23:41.757 回答