REACT- firebase的上下文API

Question

首先，我想说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 (
        <ProductsContext.Provider value={{products}}>
            { children }
        </ProductsContext.Provider>
    );
}

export default ProductsContextProvider;

useproducts.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 ( 
        <div className={styles.p__container}>
            <div className="row">
                <div className="col-sm-8">
                    <div className="py-3">
                        {products.length} Products
                    </div>
                </div>
                <div className="col-sm-4">

                </div>
            </div>
            <div className={styles.p__grid}>

                {
                    products.map(product => (
                        <ProductItem key={product.id} product={product}/>
                    ))
                }

            </div>
            <div className={styles.p__footer}>

            </div>
        </div>
     );
}
 
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();

Answer 1

使它起作用。

我将

productionContext.js

import React, { createContext, useState } from 'react';
// import { dummyProducts } from '../services/dummy';
export const ProductsContext = createContext();

const ProductsContextProvider = ({children}) => {

    const [products, setProducts] = useState([]);

    return ( 
        <ProductsContext.Provider value={{products, setProducts}} >
            { children }
        </ProductsContext.Provider>
     );
}

export default ProductsContextProvider;

和更改

为：

import React, { useEffect, useState, createContext } from 'react';
import ProductItem from './ProductItem';
import styles from './ProductsGrid.module.scss';
import { useProducts } from '../../hooks/useProducts'
import {collection, onSnapshot, where} from "firebase/firestore";
import {db} from "../../firebase";

export const ProductsContext = createContext();

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

    const productData = await promise;
    //console.log(productData);
    return productData;
}

const ProductsGrid = () => {

    const { products, setProducts } = useProducts()
    const [loading, setLoading]= useState(false);

    const getProducts = async ()=>{
        setLoading(true)
        const newText = await getProductData();
        setProducts(newText)
        setLoading(false)
    }

    useEffect(()=> {
        getProducts()
    },[])

    return (
        loading ? (
            <div className={styles.p__container}>
                <div className="row">
                    <div className="col-sm-8"> <h4>Loading...</h4></div></div></div>) : (
        <div className={styles.p__container}>
            <div className="row">
                <div className="col-sm-8">
                    <div className="py-3">
                        {products.length} Products
                    </div>
                </div>
                <div className="col-sm-4">

                </div>
            </div>
            <div className={styles.p__grid}>

                {
                    products.map(product => (
                        <ProductItem key={product.id} product={product}/>
                    ))
                }

            </div>
            <div className={styles.p__footer}>

            </div>
        </div>
        ));
}
 
export default ProductsGrid;

著名的更改为：

1. 我将获取请求移至productsGrid
2. 我更改了GetProductData（）函数的结构。我怀疑这是新承诺的“回报”，这并没有带来预期的效果。
3. 我添加了加载状态