Auswahl eines React Hooks, der für die Verwendung mit dem Onsnapshot von Firestore geeignet ist

Question

Ich verwende in meiner React Native-App häufig Firestore-Snapshots. Ich habe auch React-Hooks verwendet. Der Code sieht so aus:

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

        // Wenn die Komponente zum ersten Mal geladen wird, alle geladenen Daten zum Status hinzufügen.
        // Wenn sich die Daten im Firestore ändern, erhalten wir Aktualisierungen in diesem Rückruf.
        // Anschließend die Benutzeroberfläche basierend auf dem aktuellen Status aktualisieren

    });;
}, []);

Zuerst dachte ich, useState sei der beste Hook zum Speichern und Aktualisieren der Benutzeroberfläche. Allerdings ist der aktuelle Status gemäß den Einstellungen meines useEffect-Hooks, der ein leeres Abhängigkeitsarray enthält, undefiniert, wenn der Snapshot-Callback ausgelöst wird und ich versuche, den aktuellen Status mit neuen Änderungen zu ändern . Ich denke, das liegt an den Schließungen. Ich konnte dieses Problem lösen, indem ich useRef und forceUpdate()

const dataRef = useRef(initialData);

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

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

       // Wenn Snapshot-Daten hinzugefügt werden
       dataRef.current.push(newData)
       Update erzwingen()

       //Wenn die Snapshot-Daten aktualisiert werden
       dataRef.current.find(e => einige Bedingungen) = aktualisierte Daten
       Update erzwingen()

    });;
}, []);

zurückkehren(
// JSX mit dataRef.current
)

Meine Frage ist, verwende ich useRef richtig und anders als useState? Ich habe das Gefühl, dass die Aktualisierung des Hooks useRef und der Aufruf von forceUpdate() nicht korrekt sind. Beim Versuch, useState zu verwenden, habe ich versucht, die Statusvariable zum Abhängigkeitsarray hinzuzufügen, aber das führte zu einer Endlosschleife. Ich möchte die Snapshot-Funktion nur einmal initialisieren und möchte, dass die Zustandsdaten in der Komponente im Laufe der Zeit aktualisiert werden, wenn sich das Backend ändert (ausgelöst im onSnapshot-Rückruf).

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());
            })
        })
    }, [])