Question

我编写了一个自定义 React 钩子，用于从 firebase firestore 中获取类别列表。然后我映射这个返回数组以向用户显示类别列表。

但是，当我调用自定义钩子时，它不会在前端创建列表。当我 console.log 数组时，它首先记录 null 然后记录正确的列表。我有一种感觉，显示列表的 react 组件正在尝试显示返回的第一个值为 null。

下面是我的自定义钩子和返回列表的组件：

import { useState, useEffect } from 'react';
import firebase from '../firebase/firebase';

function useCategories() {

  const [categories, setCategories] = useState(null);

  useEffect(() => {
    const unsubscribe = firebase
        .firestore()
        .collection('categories')
        .onSnapshot((snapshot) => {
            const fetchedCategories = snapshot.docs.map((document) => (
                document.data().name
            ))
            setCategories(fetchedCategories)
        })

    return () => unsubscribe() // drop subscription to firestore once components unmounts
  }, []);

  return categories
}

export default useCategories;

import React from 'react';
import useCategories from '../helpers/useCategories';

const CategoriesList = () => {

    const categories = useCategories();

    return (
        <ul>
            {categories && categories.map(category => (
                <li key={category.name}>
                    {category.name}
                </li>
            ))}
        </ul>
    );
}

export default CategoriesList;

我觉得这可能是一个简单的解决方案，但我脑子糊了

干杯

自定义反应挂钩未获取值

0 个答案: