reactjs - 使用 useEffect 避免在多个 firebase 快照上重新渲染

Question

问题：我有一个 useEffect，我从 4 个不同的 firebase 集合中收集数据。这使得站点（重新）渲染 4 次。问题是我该如何避免这种情况？我知道它会为每个 setState 重新渲染，但不确定如何避免这种情况。我假设我将不得不使用某种异步功能？

我对异步函数很陌生，我想可能在每个 onSnap 函数上使用 promise -> resolve，但这不会破坏监听器分离吗？

代码如下：

 useEffect(() => {

        const unsubInstruments = DB.collection(`organizations/${window.localStorage.getItem(OrgKey)}/assets/instrumentarchive/items`)
        const unsubUniforms = DB.collection(`organizations/${window.localStorage.getItem(OrgKey)}/assets/uniformarchive/items`)
        const unsubOtherAssets = DB.collection(`organizations/${window.localStorage.getItem(OrgKey)}/assets/other_assets/items`)

        const unsubAssetsCollection = DB.collection(`organizations/${window.localStorage.getItem(OrgKey)}/assets`)

        const getCollectionSizes = async () => {

            const assetsSize = () => {
                unsubAssetsCollection.onSnapshot((snap) => {
                    let assetsSize = snap.size
                    setAssetsSize(assetsSize)
                })
                return () => unsubInstruments()
            }

            const instrumentsSize = () => {
                unsubInstruments.onSnapshot((snap) => {
                    let instruments = snap.size
                    setInstruments(instruments)
                })
                return () => unsubInstruments()
            }

            const uniformsSize = () => {
                unsubUniforms.onSnapshot((snap) => {
                    let uniforms = snap.size
                    setUniforms(uniforms)
                })
                return () => unsubUniforms()
            }

            const otherAssetsSize = () => {
                unsubOtherAssets.onSnapshot((snap) => {
                    let otherAssets = snap.size
                    setOtherAssets(otherAssets)
                })
                return () => unsubOtherAssets()
            }

            assetsSize()
            instrumentsSize()
            uniformsSize()
            otherAssetsSize()

        }

        getCollectionSizes()
    }, [])

标签： reactjsfirebasereact-hooksuse-effect

Answer 1

所以正如评论所说，答案是不要像我一样使用状态，而是有一个状态，其中状态变量。