通过react转盘中的graphql加载的盖茨比夏普图像未激活

我已经创建了一个react引导旋转木马，其中包含一些通过graphql和gatsby image sharp加载的图像（源图像在directus中）

我看到图像是在代码中创建的，但它们从未被分配“活动”类。当我把图像放在旋转木马外面时，它们一个接一个地正确显示，因此检索似乎工作正常

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

我还看到，如果我在graphql幻灯片之前和之后放了一张幻灯片，则会显示第一张“正常”幻灯片，并且当事务启动时，在再次显示下一张静态创建的幻灯片之前，我会得到与生成的幻灯片数相对应的延迟

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

我用于生成此代码的代码包括以下内容：

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

从“React”导入React
从“react bootstrap”导入{Row，Col，Container，Carousel}
从“盖茨比”导入{graphql}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
从“盖茨比图像”导入Img
常量IndexPage=（{data}）=>(
测试
{data.allDirectusSlideshow.edges.map（（幻灯片放映）=>{
返回slideShow.node.images.map（（图像）=>{
const sharp=data.allImageSharp.edges.find（（imageSharp）=>(
imageSharp.node.fluid.originalName==image.filename（U盘））
返回
形象
})
})}
测试2
)
export const query=graphql`
质疑{
allDirectusSlideshow（筛选器：{title:{eq:“Voorpagina”}}）{
边缘{
节点{
标题
图像{
磁盘文件名
}
}
}
}
阿利马夏普{
边缘{
节点{
身份证件
流质{
原名
…盖茨比磁流体
}
}
}
}
}
`
导出默认索引扩展

---

由于该站点的directus api不是公开的，我已经给出了一个生成的代码示例（注意：只有主页起作用）

显然，bootstrap carousel希望它的项目是carousel的直接子项。这意味着反应碎片在这里不起作用

更改此选项：

  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>
                )

返回(
形象
)