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

Question

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

Answer 1

您的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 查询将更容易调试。 return 语句上方的 console.log 将帮助您了解嵌套属性。