TypeError: undefined is not an object (evaluating 'nod.images.fluid') --

如何解决TypeError: undefined is not an object (evaluating 'nod.images.fluid') --

我是 Gatsby 的新手，并试图在模态上放置图像轮播。我在 Contentful 上有一组图像，无法映射图像。我可以在模态之外做，但在里面我无法到达数组。

我尝试使用不同的模态、不同的轮播，但这是我能找到的最好的结果。

这些是轮播代码：

const CarouselUI = ({ position,handleClick,children }) => (
  <Container>
    {children}
    <Arrow onClick={handleClick} data-position={position - 1}>{'<'}</Arrow>
    <Arrow right onClick={handleClick} data-position={position + 1}>{'>'}</Arrow>
  </Container>
);
const Carousel = makeCarousel(CarouselUI)

这些是组件的代码

const Product = ({ node }) => {
  const [showModal,setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div>
      <figure>
        <Link href="/">
          <Image fluid={node.image.fluid} alt={node.title} />
        </Link>
        <figcaption onClick={handleShow}>
          <h4>Quick View</h4>
        </figcaption>
        <p>{node.title}</p>
        <p>{node.price}</p>
        <Modal className={product1Style.Modal} show={showModal} onHide={handleClose}>
          <section className={product1Style.modalheader}>
            <h1>{node.title}</h1>
          </section>
          <section className={product1Style.modalcontent}>
            <Modal.Body className={product1Style.row + ' ' + product1Style.center} closeButton>
              <div className={product1Style.col + ' ' + product1Style.colspan3}>
                <h4>{node.price}</h4>
                <div>
                  <button>Purchase</button>
                </div>
              </div>
              <div className={product1Style.col + ' ' + product1Style.colspan4}>
                <Carousel>
                  {node.images.map((nod) => {
                    return (
                      <Slide>
                        <Image fluid={nod.images.fluid} />
                      </Slide>
                    )
                  })}
                </Carousel>
              </div>
            </Modal.Body>
          </section>
        </Modal>
      </figure>
    </div>
  )
}

这是我的课：

class Product1 extends React.Component {

  render() {
      const ProductNecklace = this.props.data.productNecklace.edges

      return (
          <Layout>
              <section className={product1Style.lowerBody}>
                  <section className={product1Style.product1Necklace}>
                      <h3>Product1 Necklace</h3>
                      <div className={product1Style.productnecklaceimage}>
                          {ProductNecklace.map(({ node },i) => (
                              <Product node={node} key={node.id} />
                          ))}
                      </div>
                  </section>
              </section>
          </Layout>
      )
  }
}

解决方法

您的 nod 是图像本身，它是来自 node.images 的可迭代对象，您可以随意命名它。在不知道数据结构的情况下，无法弄清楚地图应该如何，但我想应该是这样的：

<Carousel>
  {node.images.map(image => {
    console.log(image)
    return (
      <Slide>
        <Image fluid={image.childImageSharp.fluid} />
      </Slide>
    )
  })}
</Carousel>

如果您提供 GraphQL 查询如何，我将能够推断出对象和数组如何。假设您的 node.images 包含一组图像，在每个 image 中，您需要先访问 childImageSharp 属性，然后才能到达 fluid。正如我所说，您的 GraphQL 查询将更容易调试。 console.log 语句上方的 return 将帮助您了解嵌套属性。