如何在不迭代的情况下访问数组中的特定元素？

Posted 2023-03-08

【中文标题】如何在不迭代的情况下访问数组中的特定元素？

【英文标题】：How to access a specific element out of an array without iterating?

【发布时间】：2020-03-27 04:28:29

【问题描述】：

我有以下文件夹结构

/images
/images/pic1.jpg
/images/pic2.jpg

使用以下 GraphQL 查询时..

query MyQuery1 
  file(sourceInstanceName: eq: "images", name: eq: "pic1") 
    name
    publicURL
  

可以使用<img src=data.file.publicUrl alt="" /> 之类的方式访问结果。到目前为止，一切都很好。

但现在我想通过一个查询从该文件夹中检索多个图像。所以我想出了以下内容：

query 
  allFile(
    filter: 
      sourceInstanceName:  eq: "images" 
      name:  in: ["pic1", "pic2"] 
    
  ) 
    nodes 
      name
      publicURL
    
  

太棒了！但是，我现在如何无需使用map 或遍历结果就可以访问其中一张图片？

我正在寻找这样的东西，这当然行不通：

<img src=data.file.publicUrl name.eq="pic1" alt="pic1"/>

也不是这样的：

<img src=data.allFile.nodes.0.publicUrl alt="pic1" />

我想使用gatsby-image 来优化和调整我的图像大小。这就是我选择 GraphQL 方式而不是直接导入的原因。我在错误的轨道上吗？

【参考方案1】：

我自己想出来的。我不知道可以将事物链接 在一起。这对我有用。

query 
  imageOne: file(sourceInstanceName: eq: "images", relativePath: eq: "pic1.jpg") 
    id
    childImageSharp 
      fixed(width: 30) 
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      
    
  
  imageTwo: file(sourceInstanceName: eq: "images", relativePath: eq: "pic2.jpg") 
    id
    childImageSharp 
      fixed(width: 30) 
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      
    
  

然后像这样访问它：

<Img fixed=data.imageOne.childImageSharp.fixed  />

和

<Img fixed=data.imageTwo.childImageSharp.fixed  />

P.S：这是gatsby-config.js中的相关部分

  resolve: `gatsby-source-filesystem`,
  options: 
    name: `images`, <<== gets filtered by sourceInstanceName: ..
    path: `$__dirname/src/images/`,
  ,
,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,

【参考方案2】：

OP 回答了他们自己的问题，但这里有另一种方式：使用 Array.prototype.filter

const Index = (props) => 
  const  data:  allFile:  edges    = props;

  const heroImage = edges.filter
    (el => el.node.childImageSharp.fluid.originalName === "heroImage.png")
      [0].node.childImageSharp.fluid;
  // ...


export const query = graphql`

  allFile(filter: 
    extension: eq: "png",
    sourceInstanceName: eq: "images",
    sort: fields: [childImageSharp___fluid___originalName], order: ASC)
  
    edges 
      node 
      childImageSharp 
          fluid(maxWidth: 300, quality: 50) 
            originalName
            ...GatsbyImageSharpFluid
          
        
      
    
  

`;