Cangkuk tak segerak dan cangkuk bukan tak segerak untuk mendapatkan data

Question

Saya telah membina cangkuk tersuai:

const useFirestoreCollection = async (collectionName) => {

    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);

    return documents;
};

Saya boleh menggunakannya dalam komponen saya seperti ini:

const [myData, setMyData] = useState([]);

useFirestoreCollection('registeredUsers')
    .then((data) => {
        setMyData(data); // Data Access
    })
    .catch((error) => {
        console.log(error); // Error
    });

Saya juga boleh mengalih keluar async dalam cangkuk tersuai:

const useFirestoreCollection = (collectionName) => { <- ASYNC DELETED
    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);
    return documents;
};

...dan gunakannya dalam komponen saya seperti ini:

const myData = useFirestoreCollection('registeredUsers')

Saya cuba mencari cara terbaik tetapi tidak dapat.

Bilakah anda harus menggunakan kata kunci async dalam cangkuk dan bilakah anda tidak sepatutnya?

Answer 1

Saya tidak pernah melihat situasi di mana cangkuk harus tidak segerak. Cangkuk kini mengembalikan janji dan bukannya fungsi keadaan dan setState yang anda mahu komponen itu gunakan. Ini akan menjadi anti-corak utama dan menjadikan kesederhanaan cangkuk sangat rumit.

Jika anda perlu menggunakan fungsi async/menunggu dalam cangkuk, anda boleh mengisytiharkan fungsi async di dalamnya. Sama seperti yang anda lakukan.

Kaedah kedua adalah jelas cara yang betul untuk melakukan ini.

Answer 2

Dalam kes pertama, membuat cangkuk async adalah sia-sia kerana tiada apa-apa asynchronous dalam cangkuk, hanya di dalam useEffect .

Ini menjadikannya lebih sukar untuk digunakan dan membuat anda mengulangi keadaan.