選擇適合與Firestore的onsnapshot一起使用的React Hook

Question

我在我的React Native應用程式中使用了很多Firestore快照。我還使用了React hooks。程式碼看起來像這樣：

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

        // 當元件初始化載入時，將所有載入的資料加入狀態。
        // 當Firestore上的資料發生變化時，我們在此回呼中接收到更新，
        // 然後根據當前狀態更新UI

    });;
}, []);

起初，我認為useState是儲存和更新UI的最佳hook。然而，根據我的useEffect hook的設置，它帶有一個空的依賴數組，當快照回調被觸發並且我嘗試使用新更改修改當前狀態時，當前狀態是未定義的。我認為這是由於閉包引起的。我能夠透過使用useRef和forceUpdate()來解決這個問題，程式碼如下：

const dataRef = useRef(initialData);

const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

       // 如果快照資料被新增
       dataRef.current.push(newData)
       forceUpdate()

       // 如果快照資料被更新
       dataRef.current.find(e => some condition) = updatedData
       forceUpdate()

    });;
}, []);

return(
// 使用dataRef.current的JSX
)

我的問題是，我是否正確地使用了useRef以及與useState不同的forceUpdate？我覺得在整個應用程式中更新useRef hook並且呼叫forceUpdate()並不正確。當嘗試使用useState時，我嘗試將狀態變數新增至依賴數組中，但結果導致無限循環。我只想要初始化快照函數一次，並且希望元件中的有狀態資料隨著後端的變化而隨時間更新（在onSnapshot回調中觸發）。

Answer 1

如果你結合使用 useEffect 和 useState，會更好。 useEffect 負責設定和解除監聽器，useState 只需要負責你需要的資料。

const [data, setData] = useState([]);

useEffect(() => { 
       const unsubscribe = someFirestoreAPICall().onSnapshot(snap => {
         const data = snap.docs.map(doc => doc.data())
         this.setData(data)
       });

       //记得在卸载组件时取消实时监听器，否则会造成内存泄漏
       return () => unsubscribe()
}, []);

然後你可以在你的應用程式中直接引用 useState 鉤子中的 "data"。

Answer 2

A simple useEffect worked for me, i don't need to create a helper function or anything of sorts,

useEffect(() => {
        const colRef = collection(db, "data")
        //real time update
        onSnapshot(colRef, (snapshot) => {
            snapshot.docs.forEach((doc) => {
                setTestData((prev) => [...prev, doc.data()])
                // console.log("onsnapshot", doc.data());
            })
        })
    }, [])

一個簡單的useEffect對我很有用，我不需要創建任何幫助函數或類似的東西，

useEffect(() => {
        const colRef = collection(db, "data")
        //实时更新
        onSnapshot(colRef, (snapshot) => {
            snapshot.docs.forEach((doc) => {
                setTestData((prev) => [...prev, doc.data()])
                // console.log("onsnapshot", doc.data());
            })
        })
    }, [])