Ошибка Гэтсби Невозможно прочитать свойство 'fixed' из null - PullRequest
Новая
       31

Ошибка Гэтсби Невозможно прочитать свойство 'fixed' из null

0 голосов
/ 06 апреля 2019

Я хочу показать мои продукты в разделе меню на главной странице. Я пытаюсь отобразить контент, такой как текст и изображения из содержательного API, но я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'fixed' со значением NULL
SRC / компоненты / HomePageComponents / Product.js: 6
3 | import {styles} из "../../utils"
4 | импорт Img из "gatsby-image"
5 |
6 | функция экспорта по умолчанию Product ({product}) {
7 | const {имя, цена, ингредиенты} = продукт
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;
  }
`

это мое Menu.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;
  }
`

1 Ответ

0 голосов
/ 06 апреля 2019

В этом случае выглядит как свойство img в product, не имеющее свойства fixed. В частности, img равно нулю, и вы рассматриваете его как объект. Возможно, вам придется проверить, действительно ли img является объектом, прежде чем разрушать его

...