来自Firebase的reactjs-React-上下文API和promise

首先我想说a）我是新手，b）我花了大约8小时试图在stackoverflow中挖掘修复，尝试了许多不同的方法。我被困住了。非常感谢您的时间。

这里的目标是在渲染页面之前等待来自 firebase 的请求以创建值“产品”。不断发生的事情是产品被加载为空。

这是我的设置：

ProductContext.js

import React, {createContext, useState, useEffect} from 'react';
import { dummyProducts } from '../services/dummy';
import {collection, onSnapshot} from "firebase/firestore";
import {db} from "../firebase";

export const ProductsContext = createContext();

export function getProductData() {
    const myArray =[];
    return new Promise(function (resolve, reject) {
        const querySnapshot = onSnapshot(collection(db, 'products'), (snapshot) => {
            snapshot.forEach(doc => {
                let productData = doc.data();
                myArray.push(productData)
            })
        })
        resolve(myArray);
    });
}

const ProductsContextProvider = ({children}) => {

    const [products, setProducts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        let didCancel = false;
        async function fetchMyAPI() {
            let results = await getProductData();
            console.log(results) // Outputs array with results
            setProducts(results)
        }
        fetchMyAPI();
        return () => { didCancel = true; }; // Remember if we start fetching something else
    }, []);

    return (
        
            { children }
        
    );
}

export default ProductsContextProvider;

使用Products.js

// eslint-disable-next-line
import React, { useContext } from 'react';
import { ProductsContext } from '../contexts/ProductsContext';

export const useProducts = () => {

    const ctx = useContext(ProductsContext)

    return {
        ...ctx
    }
}

ProductsGrid.js

import React from 'react';
import ProductItem from './ProductItem';
import styles from './ProductsGrid.module.scss';
import { useProducts } from '../../hooks/useProducts';

const ProductsGrid = () => {

    const {products} = useProducts();
    console.log(products.length) // Outputs zero
    console.log(products) // Outputs array with 1 object (correct)

    return (

     );
}
 
export default ProductsGrid;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import * as serviceWorker from './serviceWorker';

import { HelmetProvider } from 'react-helmet-async';
import ProductsContextProvider from './contexts/ProductsContext';
import CartContextProvider from './contexts/CartContext';

ReactDOM.render(
    <HelmetProvider>
      <ProductsContextProvider>
        <CartContextProvider>
          <Routes />
        </CartContextProvider>
      </ProductsContextProvider>
    </HelmetProvider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();