在我更改 React 中的代码之前，Firestore 数据不会加载

Question

我正在启动一个新应用程序，它将作为真正应用程序的基础

它工作正常，但在我更改 React 中的代码之前不会加载 Firestore 数据

// I have one collection with subcollections,
// first collection is oses (operating systems) and the others are:
// The real Operating systems, that are children of the main ones
// In this case, Windows and macOS

export default function App() {
   const [categories, setCategories] = useState({});
   const [startProcessDone, setstartProcessDone] = useState(false);
   const [firstPhaseDone, setFirstPhaseDone] = useState(false);
   const [secondPhaseDone, setSecondPhaseDone] = useState(false);

   useEffect(() => {
      setCategories({});
      setstartProcessDone(true);
   }, []);

   useEffect(() => {
      console.log("in useEffect 1");
      //Here, I read the main ones, which are, in this case
      // Windows and macOS
      const readDocs = async (collectionRef) => {
         const result = {};
         try {
            const querySnapshot = await getDocsFromServer(collectionRef);
            querySnapshot.docs.forEach((doc) => {
               result[doc.id] = { ...doc.data() };
            });
            setCategories(result);
         } catch (error) {
            console.log("error::: ", error);
         }
      };
      const collectionRef = collection(db, "oses");
      readDocs(collectionRef);
      setFirstPhaseDone(true);
   }, [startProcessDone]);

   useEffect(() => {
      console.log("in useEffect 2");

      const readDocs = async (prop, collectionRef) => {
         let newOperatingSystems = [];
         let newOperatingSystemObj = {};
         try {
            const querySnapshot = await getDocsFromServer(collectionRef);
            querySnapshot.docs.forEach((doc) => {
               newOperatingSystemObj = { ...doc.data() };
               newOperatingSystems[newOperatingSystemObj.name] =
                  newOperatingSystemObj;
            });
            let newCategories = { ...categories };
            newCategories[prop].items = newOperatingSystems;
            setCategories(newCategories);
         } catch (error) {
            console.log("error:: ", error);
         }
      };

      for (var prop in categories) {
         // And for each of the main ones, we have their children, which are, in this case
         // for Windows: Windows XP and Windows Vista
         // for macOS: Big Sur
         //These subcollections are children of the main ones
         const collectionRef = collection(db, `oses/${prop}/children`);
         readDocs(prop, collectionRef);
      }
      setSecondPhaseDone(true);
   }, [firstPhaseDone]);

   useEffect(() => {
      console.log("in useEffect 3.");
      // The result is:
      console.log("categories:: ", categories);
   }, [secondPhaseDone]);

   return (
      <div>
         <h1>Operating Systems</h1>
      </div>
   );
}

结果是

当我更改一些代码时，它显示的是：

数据没问题

但是如果我只是重新启动它使用

它不会加载任何数据：

我在这里可能会错过什么

提前致谢

拉斐尔

Answer 1

在深入审查后，我认为它与 FireStore 的某种缓存有关

我尝试使用另一个更简单的代码，console.logs 的情况是一样的，但软件运行良好，即使 console.logs 错误

我不明白，但它的工作原理

拉斐尔

Answer 2

你可以试试这样做吗？

useEffect(() => { fetchDocs(); }, [])

const fetchDocs = async() => { const response = db.collection('name'); }

在 useEffect 中使用 asynch 绝不是一个好主意。 它可能会导致 memory 泄漏。