我有一个问题与我的电子商务web应用程序

Question

有人能帮我解决这个错误吗?我遵循了一个电子商务示例应用程序，但最后，当我点击"立即购物"时，我遇到了一个错误。这是我收到的信息:服务器错误TypeError:不能解构product的image属性，因为它是null。

生成页面时发生错误。所有控制台日志将显示在终端窗口中。源Pages product[slug].js (19:10) @ image

const { image, name, details, price } = product;
|        ^
20 | const [index, setIndex] = useState(0);
21 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext();
22 | const handleBuyNow = () => {

export const getStaticPaths = async () => {
const query = `*[_type == "product"]{
slug{
current
}
}`;
const products = await client.fetch(query);
const paths = products.map((product) => ({
params: {
slug: product.slug.current,
},
}));
return {
paths,
fallback: "blocking",
};
};
export const getStaticProps = async ({ params: { slug } }) => {
const query = `*[_type == "product" && slug.current == '${slug}'][0]`;
const productsQuery = '*[_type == "product"]';
const product = await client.fetch(query);
const products = await client.fetch(productsQuery);
return {
props: { products, product },
};
};
export default ProductDetails;

谢谢

当您点击"立即购物"时，应该会直接打开购物车。

Answer 1

而不是像这样解构你的属性

const { image, name, details, price } = product;

你应该像这样访问它们，

product?.image

这将帮助您避免错误，并且您还可以有条件地检查特定属性是否存在。