Gatsby错误无法读取null的属性“fixed”

Question

我想在索引页的菜单部分显示我的产品。我试图从contentful API显示文本和图像等内容，但我得到了这个错误：

TypeError：无法读取null的属性“fixed”
src/components/homepageComponents/Product.js:6
3从“../../utils”导入{styles}
4从“gatsby-image”导入Img
5
6导出默认函数Product（{Product}）{
7 const{name,price,appriguitions}=Product
8 const{fixed}=Product.Img

这是我的product.js

import React from "react"
import styled from "styled-components"
import { styles } from "../../utils"
import Img from "gatsby-image"

export default function Product({ product }) {
  const { name, price, ingredients } = product
  const { fixed } = product.img

  return (
    <ProductWrapper>
      <Img fixed={fixed} className="img" />
      <div className="text">
        <div className="product-content">
          <h3 className="name">{name}</h3>
          <h3 className="price">{price}</h3>
        </div>
        <p className="info">{ingredients}</p>
      </div>
    </ProductWrapper>
  )
}

const ProductWrapper = styled.div`
  @media (min-width: 576px) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1rem;
  }
  .img {
    border-radius: 0.5rem;
  }
  .product-content {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  .name {
    color: ${styles.colors.mainYellow};
    margin-top: 0.5rem;
  }
  .price {
    color: ${styles.colors.mainYellow};
    margin-top: 0.5rem;
  }
  .info {
    margin-top: 0.5rem;
    word-spacing: 0.2rem;
    text-transform: lowercase;
  }
`

这是我的菜单。js

import React from "react"
import Product from "./Product"
import { StaticQuery, graphql } from "gatsby"
import { Section, Title } from "../../utils"
import styled from "styled-components"
// import { Link } from "gatsby"

export default function Menu() {
  return (
    <Section>
      <Title title="Featured items" message="Little taste" />
      <ProductList>
        <StaticQuery
          query={graphql`
            {
              items: allContentfulMenu {
                edges {
                  node {
                    name
                    price
                    id
                    ingredients
                    img {
                      fixed(width: 150, height: 150) {
                        ...GatsbyContentfulFixed_tracedSVG
                      }
                    }
                  }
                }
              }
            }
          `}
          render={data => {
            return data.items.edges.map(item => {
              return <Product key={item.node.id} product={item.node} />
            })
          }}
        />
      </ProductList>
    </Section>
  )
}

const ProductList = styled.div`
  margin: 3rem 0;
  display: grid;
  grid-template-columns: 100%;
  grid-row-gap: 3rem;
  @media (min-width: 576px) {
    grid-template-columns: 95%;
  }
  @media (min-width: 776px) {
    grid-template-columns: 80%;
    justify-content: center;
  }
  @media (min-width: 992px) {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
  }
`

Answer 1

在本例中，product中的img属性没有任何fixed属性。特别是，img为null，您将其视为对象。在对img进行析构之前，您可能必须检查它是否实际上是一个对象