TypeError: Невозможно прочитать свойство 'fixed' из null

Question

Я получил это сообщение об ошибке: TypeError: Невозможно прочитать свойство 'fixed' из 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>
  )
}

Исправлено, определено в 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>
  )
   </>
  )