Question

我收到此错误消息：TypeError：无法读取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>
  )
   </>
  )

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

1 个答案: