我试图用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”。
1条答案
按热度按时间14ifxucb1#
我现在正在做一个使用JSSDK的项目,但是我使用的是NextJS,我相信这是因为集合是一个对象数组,每个对象代表一个集合。
products属性不是数组本身的属性,而是数组中每个对象的属性。
要访问每个集合的产品,可以执行以下操作:
或