Javascript 映射图像数组会导致在每个实例上重复相同的图像

我正在尝试将一个对象从阵列图像映射到单独产品页面上的图像库（来自strapi）。显示正确数量的图像，但它会在其上重复相同的图像。即使在产品页面上，也不应该在各自的数组中包含该图像。示例-

我检查过源和图像src链接都是同一图像的不同版本。-

图ql-

任何关于我错在哪里的指点都会很好！如果你需要更多的信息，请告诉我

代码-

---

您没有正确设置

键

值

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>

资料来源：

根据您的数据结构，您可能需要更改循环和一些其他参数。在这种情况下，图像位于

类别

节点内，因此必须通过嵌套两个不同的循环来推断图像

我们的想法是循环遍历所有图像节点，并添加

localFile\uuuuuu节点

字段，其中包含：

  image.localFile___NODE = fileNode.id;

id

以前是在以下位置创建的：

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

---

我已经尝试了很多createRemoteFileNode代码的组合，但我无法了解需要将哪些内容细分到其中才能使其正常工作，总是以“File”类型上的“cannotqueryfield”localFile结束。StrapiPortfolio对GetSingleHome的更改&我使用“for（const medium of formats.medium）”？

 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;
            }
          }
        }
      }
    };

  image.localFile___NODE = fileNode.id;

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