Asynchrone Hooks und nicht asynchrone Hooks zum Abrufen von Daten

Question

Ich habe einen benutzerdefinierten Haken gebaut:

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;
};

Ich kann es in meiner Komponente so verwenden:

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

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

Ich kann die Asynchronität auch im benutzerdefinierten Hook entfernen:

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;
};

...und verwende es in meiner Komponente so:

const myData = useFirestoreCollection('registeredUsers')

Ich habe versucht, den besten Weg herauszufinden, aber es gelang mir nicht.

Wann sollten Sie das Schlüsselwort async in Hooks verwenden und wann nicht?

Answer 1

我从未见过钩子应该是异步的情况。该钩子现在返回一个承诺，而不仅仅是您希望组件使用的 state 和 setState 函数。这将是一个主要的反模式，并使钩子的简单性变得非常复杂。

如果您需要在挂钩中使用异步/等待功能，则可以在其中声明异步函数。就像你所做的那样。

第二种方法显然是执行此操作的正确方法。

Answer 2

在第一种情况下，使钩子异步是没有用的，因为钩子中没有任何异步内容，仅在 useEffect 内部。

这使得它更难以使用并且使您重复状态。