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

Posted 2023-03-08

【中文标题】Gatsby 错误无法读取 null 的“固定”属性

【英文标题】：Gatsby error Cannot read property 'fixed' of null

【发布时间】：2019-08-27 21:44:51

【问题描述】：

我想在索引页面的菜单部分显示我的产品。我尝试从内容 API 显示文本和图像等内容，但出现此错误：

TypeError：无法读取 null 的“固定”属性 src/components/HomePageComponents/Product.js:6 3 |从“../../utils”导入 样式 4 |从“gatsby-image”导入 Img 5 | 6 |导出默认函数 Product( product ) 7 | const 名称、价格、成分 = 产品 8 |常量 固定 = 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】：

在这种情况下，product 中的属性 img 似乎没有任何 fixed 属性。特别是，img 为 null，您将其视为对象。您可能需要在解构之前检查 img 是否真的是一个对象

【参考方案2】：

内容字段中似乎没有指定图像。因此fixed 的值是null，这是他们的插件gatsby-source-contentful 所不允许的。