我试图用Shopify buy渲染一个集合中的产品。问题是我在控制台中记录集合[5]没有问题。我可以记录集合[5]。产品和控制台会给予我该集合中产品的图形模型。然后当我刷新页面时，我得到错误“无法读取未定义的属性（阅读'products'）
适用于页面的代码：

const Home = () => {
  const { fetchAllProducts, fetchAllCollections, products, collections } = useContext(ShopContext);

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

  console.log(collections[5]);`

刷新时发送错误的代码：

const Home = () => {
  const { fetchAllProducts, fetchAllCollections, products, collections } = useContext(ShopContext);

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

  console.log(collections[5].products);

我的店铺背景：

import React, { Component } from "react";
import Client from "shopify-buy";

const ShopContext = React.createContext();

const client = Client.buildClient({
  domain: process.env.REACT_APP_SHOPIFY_DOMAIN,
  storefrontAccessToken: process.env.REACT_APP_SHOPIFY_API,
});

export class shopProvider extends Component {
  state = {
    collection: {},
    collections: [],
    product: {},
    products: [],
    checkout: {},
    isCartOpen: false,
    isMenuOpen: false,
  };

  componentDidMount() {
    if (localStorage.checkout_id) {
      this.fetchCheckout(localStorage.checkout_id);
    } else {
      this.createCheckout();
    }
  }

  createCheckout = async () => {
    const checkout = await client.checkout.create();
    localStorage.setItem("checkout_id", checkout.id);
    this.setState({ checkout: checkout });
  };

  fetchCheckout = (checkoutId) => {
    client.checkout.fetch(checkoutId).then((checkout) => {
      this.setState({ checkout: checkout });
    });
  };

  addItemToCheckout = async (variantId, quantity) => {
    const lineItemsToAdd = [{ variantId, quantity: parseInt(quantity, 10) }];
    const checkout = await client.checkout.addLineItems(
      this.state.checkout.id,
      lineItemsToAdd
    );
    this.setState({ checkout: checkout });
    this.openCart();
  };

  removeLineItem = async (lineItemIdsToRemove) => {
    const checkout = await client.checkout.removeLineItems(
      this.state.checkout.id,
      lineItemIdsToRemove
    );
    this.setState({ checkout: checkout });
  };

  fetchAllCollections = async () => {
    const collections = await client.collection.fetchAllWithProducts();
    this.setState({ collections: collections });
  }

  fetchAllProducts = async () => {
    const products = await client.product.fetchAll();
    this.setState({ products: products });
  };

  fetchProductWithHandle = async (handle) => {
    const product = await client.product.fetchByHandle(handle);
    this.setState({ product: product });
  };

  closeCart = () => {
    this.setState({ isCartOpen: false });
  };

  openCart = () => {
    this.setState({ isCartOpen: true });
  };

  render() {
    return (
      <ShopContext.Provider
        value={{
          ...this.state,
          fetchAllProducts: this.fetchAllProducts,
          fetchProductWithHandle: this.fetchProductWithHandle,
          addItemToCheckout: this.addItemToCheckout,
          removeLineItem: this.removeLineItem,
          closeCart: this.closeCart,
          openCart: this.openCart,
          closeMenu: this.closeMenu,
          openMenu: this.openMenu,
          fetchAllCollections: this.fetchAllCollections,
        }}
      >
        {this.props.children}
      </ShopContext.Provider>
    );
  }
}

const ShopConsumer = ShopContext.Consumer;

export { ShopConsumer, ShopContext };

export default shopProvider;

shopify购买的文档：https://shopify.github.io/js-buy-sdk/#fetching-collections
我试过从页面中删除fetchAllProducts和产品，但没有效果。
我试过删除fetchAllProducts和products，认为拥有products和fetchAllProducts是多余的，因此没有获取正确的变量“products”。