データを取得するための非同期フックと非同期フック
P粉041881924
P粉041881924 2024-02-26 20:12:15
0
2
382

カスタムフックを作成しました:

const useFirestoreCollection = async (コレクション名) => {

    const [ドキュメント、setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const ドキュメントデータ = [];
            querySnapshot.forEach((doc) => {
                ドキュメントデータ.push({
                    ID: ドキュメントID、
                    ...doc.data()、
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }、[]);

    書類を返却する。
};

これをコンポーネントで次のように使用できます:

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

useFirestoreCollection('登録ユーザー')
    .then((データ) => {
        setMyData(data); // データアクセス
    })
    .catch((エラー) => {
        console.log(error); // エラー
    });

カスタムフックの async を削除することもできます:

const useFirestoreCollection = (コレクション名) => { <- 非同期削除
    const [ドキュメント、setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const ドキュメントデータ = [];
            querySnapshot.forEach((doc) => {
                ドキュメントデータ.push({
                    ID: ドキュメントID、
                    ...doc.data()、
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }、[]);
    書類を返却する。
};

...そして、次のようにコンポーネントで使用します:

const myData = useFirestoreCollection('登録ユーザー')

最善の方法を見つけようとしましたが、できませんでした。

フック内で async キーワードを使用する必要があるのはどのような場合、使用すべきでないのはどのような場合ですか?

P粉041881924
P粉041881924

全員に返信(2)
P粉262926195

フックが非同期であるべき状況を見たことがありません。フックは、コンポーネントで使用する state 関数と setState 関数だけではなく、Promise を返すようになりました。これは大きなアンチパターンであり、フックのシンプルさが非常に複雑になります。

フック内で async/await 機能を使用する必要がある場合は、その中で async 関数を宣言できます。あなたと同じように。

2 番目の方法は明らかにこれを行う正しい方法です。

いいねを押す +0
P粉369196603

最初のケースでは、フックには非同期のものは何もなく、useEffect 内にのみ存在するため、フックを非同期にすることは役に立ちません。

これにより、使用が困難になり、状態が複製されます。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート