Memilih Cangkuk React yang sesuai untuk digunakan dengan gambar on Firestore

Question

Saya banyak menggunakan syot kilat Firestore dalam apl React Native saya. Saya juga menggunakan cangkuk React. Kod kelihatan seperti ini:

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

        // Apabila komponen mula dimuatkan, tambah semua data yang dimuatkan ke keadaan.
        // Apabila data pada Firestore berubah, kami menerima kemas kini dalam panggilan balik ini,
        // Kemudian kemas kini UI berdasarkan keadaan semasa

    });;
}, []);

Pada mulanya, saya fikir useState ialah cangkuk terbaik untuk menyimpan dan mengemas kini UI. Walau bagaimanapun, mengikut tetapan useEffect saya, yang disertakan dengan tatasusunan kebergantungan kosong, apabila panggilan balik syot kilat dicetuskan dan saya cuba mengubah suai keadaan semasa dengan perubahan baharu, keadaan semasa tidak ditentukan . Saya fikir ini adalah disebabkan oleh penutupan. Saya dapat menyelesaikan masalah dengan menggunakan useRef dan forceUpdate()

const dataRef = useRef(initialData);

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

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

       // Jika data syot kilat ditambah
       dataRef.current.push(newData)
       forceUpdate()

       // Jika data syot kilat dikemas kini
       dataRef.current.find(e => beberapa syarat) = updatedData
       forceUpdate()

    });;
}, []);

kembali(
// JSX menggunakan dataRef.current
)
Soalan saya ialah, adakah saya menggunakan useRef dengan betul serta forceUpdate yang berbeza daripada useState? Saya rasa ingin mengemas kini cangkuk useRef dan memanggil forceUpdate() Apabila cuba menggunakan useState, saya cuba menambah pembolehubah keadaan pada tatasusunan kebergantungan, tetapi ia menghasilkan gelung tak terhingga. Saya hanya mahu memulakan fungsi syot kilat sekali dan mahu data berstatus dalam komponen dikemas kini dari semasa ke semasa apabila bahagian belakang berubah (dicetuskan dalam panggilan balik onSnapshot). 

Answer 1

Adalah lebih baik jika anda menggabungkan useEffect dan useState. useEffect bertanggungjawab untuk menetapkan dan melumpuhkan pendengar, dan useState hanya bertanggungjawab untuk data yang anda perlukan.

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

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

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

Kemudian anda boleh terus merujuk "data" dalam cangkuk useState dalam aplikasi anda.

Answer 2

Penggunaan mudahKesan berkesan untuk saya, saya tidak perlu mencipta fungsi pembantu atau apa-apa jenis,

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

Penggunaan mudahKesan berkesan untuk saya, saya tidak perlu mencipta sebarang fungsi pembantu atau apa-apa seperti itu,

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