时间戳

首页 > 解决方案 > TypeError: undefined is not an object (evalating 'nod.images.fluid') --

mapping - TypeError: undefined is not an object (evalating '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>
      )
  }
}

标签： mappingcarouselgatsbysimplemodalcontentful

解决方案

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

推荐阅读