通过graphql在反应转盘中加载的gatsby清晰图像未激活

如何解决通过graphql在反应转盘中加载的gatsby清晰图像未激活

我创建了一个带有一些图像的react-bootstrap轮播，这些图像是通过graphql和gatsby-image-sharp（源图像在Directus中）加载的。

我看到图像是在代码中创建的，但是它们从未被分配为“活动”类。当我将图像放置在转盘之外时，它们可以正确显示，一个显示在另一个显示之下，因此检索似乎正常。

如果我在graphql图像之前和/或之后手动添加项目，这些幻灯片将正确显示。

我还看到，如果我在graphql之前和之后放置一张幻灯片，则会显示第一个“正常”幻灯片，并且在开始交易时，我会得到一个延迟，该延迟对应于下一个静态生成的幻灯片的数量创建的幻灯片会再次显示。

当使用react开发工具检查站点时，我看到工作幻灯片的事务密钥为“ .0”和“ .2”，而它们之间的非工作幻灯片的事务密钥为“ .1：0 ：0“，”。1：0：1“，等等...

React devtools tree

我用来生成此代码的代码如下：

import React from "react"
import { Row,Col,Container,Carousel } from "react-bootstrap"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"

const IndexPage = ({ data }) => (
  <Layout pageInfo={{ pageName: `index` }}>
    <SEO title="Home" keywords={[`gatsby`,`react`,`bootstrap`]} />
    <Container className="text-center">
      <Row>
        <Col>
          <Carousel>
            <Carousel.Item>
              <div className="d-block w-100 gatsby-image-wrapper">
              <h1>test</h1>
              </div>
            </Carousel.Item>
            {data.allDirectusSlideshow.edges.map((slideShow) => {
              return slideShow.node.images.map((image) => {
                const sharp = data.allImageSharp.edges.find((imageSharp) => (
                  imageSharp.node.fluid.originalName === image.filename_disk))
                return <>
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                </>
              })
            })}
            <Carousel.Item>
              <h1>Test 2</h1>
            </Carousel.Item>
          </Carousel>
        </Col>
      </Row>
    </Container>
  </Layout>
)

export const query = graphql`
    query {
      allDirectusSlideshow(filter: {title: {eq: "Voorpagina"}}) {
        edges {
          node {
            title
            images {
              filename_disk
            }
          }
        }
      }
      allImageSharp {
        edges {
          node {
            id
            fluid {
              originalName
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `
export default IndexPage

由于该站点的directus api是不公开的，因此我提供了一个生成的代码示例here（注意：仅主页有效）

解决方法

显然，自举轮播希望其商品是轮播的直接子代。这意味着反应片段在这里不起作用。

更改此内容

  return <>
              <Carousel.Item key={sharp.node.id}>
                <h1>Image</h1>
                <Img fluid={sharp.node.fluid} className="d-block w-100" />
              </Carousel.Item>
            </>

为此可以解决问题：

  return (
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                )