TypeError：undefined不是对象（评估'nod.images.fluid'）-

Burak Ozcel

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

费兰·比雷（Ferran Buireu）

您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声明将帮助您了解嵌套的属性。