Question

映射图像数组会导致同一幅图像在每个实例上重复出现

2021-01-07

522

javascript reactjs graphql gatsby

我试图将一个对象从一组排列的图像映射到单独的产品页面上的图像库中（来自 strapi）。显示了正确数量的图像，但它重复了相同的图像。即使在产品页面上，也不应该在各自的数组中包含该图像。示例 - https://i.sstatic.net/3zRTu.jpg

我检查了来源，图像 src 链接都是同一张图片的不同版本。 - https://i.sstatic.net/UEn1m.jpg

GraphIQL - https://i.sstatic.net/qL5wQ.jpg

任何关于我哪里出错的指示都很好！如果您需要更多信息，请告诉我。

代码-

<div className="image-grid">
                {data.home.galleryImage.map((image, id, caption) => (
                    
                      <Image fluid={image.formats.medium.childImageSharp.fluid} alt="hh" key={id} class="galleryimg" thumbnail/> 
                   
                ))  
                }
                </div>
        </div>

GraphQL 查询 -

export const query = graphql`
      query GetSingleHome($slug: String) {
        home: strapiHomes(slug: { eq: $slug }) {
        galleryImage {
          id 
          formats {
            medium {
              childImageSharp {
               fluid(maxWidth: 400, maxHeight: 250) {
                 ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
        }
      }
    `

Answer 1

您没有正确设置 key 值。 image 是可迭代对象，只是命名 galleryImage 的每个索引的一种方式，因此 id 并不代表图像本身的 id 。

将其更改为：

<div className="image-grid">
  {data.home.galleryImage.map((image) => (
     <Image fluid={image.formats.medium.childImageSharp.fluid} alt="hh" key={image.id} class="galleryimg" thumbnail/>  
   ))}
</div>

要访问嵌套图像属性，您需要访问其子属性，就像在 image.formats 中执行的方式一样，访问 formats 位置，但使用 image.id 。

有关更多详细信息，您可以查看 MDN 文档。

此外，如果循环正在打印同一幅图像，则内部从 Strapi 创建数据节点时，GraphQL 中未正确设置 id 。您可以自定义 GraphQL 节点架构以添加自定义参数，以便使用 Gatsby 提供的不同 API 绕过此限制， createRemoteFileNode 应该可以满足您的要求。

 const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
    
    exports.onCreateNode = async ({ node, actions, store, cache }) => {
      const { createNode, createNodeField } = actions;
    
      if (node.internal.type !== null && node.internal.type === "StrapiPortfolio") {
        for (const category of node.category) {
          for (const image of category.images) {
            console.log(image);
            const fileNode = await createRemoteFileNode({
              url: "http://localhost:1337" + image.url,
              store,
              cache,
              createNode,
              createNodeId: (id) => image.id.toString(),
            });
    
            if (fileNode) {
              image.localFile___NODE = fileNode.id;
            }
          }
        }
      }
    };

来源：如何使用 Graphql 从 Strapi 查询 Gatsby 中的多张图片

根据您的数据结构，您可能需要更改循环和一些其他参数。在这种情况下，图像位于 category 节点内，因此必须通过嵌套两个不同的循环来推断。

这个想法是循环遍历所有图像节点并添加 localFile___NODE 字段：

  image.localFile___NODE = fileNode.id;

id 先前在以下位置创建：

  createNodeId: (id) => image.id.toString(),