TypeError：无法读取 null 的“固定”属性

Question

我收到此错误消息：TypeError: Cannot read property 'fixed' of null。

该项目包括 Javascript、Reactjs、Gatsbyjs 和 Contentful。

错误代码部分：

  3 | import { styles } from '../../utils'
  4 | import Img from 'gatsby-image'
  5 | 
> 6 | export default function Product({ product }) {
  7 |   const { name, price, ingredients } = product;
  8 |   const { fixed } = product.img;
  9 | 

现有代码：

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>
  )
}

Fixed 在 Menu.js 中定义

                    img {
                      fixed(width: 150, height: 150) {                            ...GatsbyContentfulFixed_tracedSVG

在花了很多时间寻找解决方案后，我决定寻求任何帮助。

谢谢

Answer 1

这可能是因为您的组件在获得 product.img 值之前正在渲染。试试下面的代码。

if(product && product.img){
const { fixed } = product.img;
}

return (
    <>
{fixed 
  &&(
    <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>
  )
   </>
  )