我的电子商务网络应用程序有问题

Question

任何人都可以帮我解决这个错误吗？我遵循了一个电子商务示例应用程序，但最后在单击“立即购买”时遇到错误。这是我收到的消息： 服务器错误 类型错误：无法解构“产品”的属性“图像”，因为它为空。

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 来源 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

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