Mapping array of images leads to the same image repeating on every instance

问题

Im trying to map an object from an array of arrayed images into an image gallery on separate product pages (coming from strapi). The correct number of images appear but it repeats the same image over them. Even on product pages that shouldn't include that image in their respective array. examples - https://imgur.com/a/PKlpofy

Ive checked the source and the image src links are all different versions of the same image. - https://imgur.com/a/968w77b

GraphIQL - https://imgur.com/a/HvgMA8r

Any pointers on where im going wrong would be great! please let me know if you need any more info.

Code-

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

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

回答1:

You are not setting properly the key value. image is the iterable object, is just a way of naming each index of your galleryImage so the id, doesn't stand as the id of the image itself.

Change it to:

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

To access the nested image properties, you need to access its child properties, like the way you do in image.formats, accessing to formats position, but using image.id.

For further details, you can check the MDN docs.

In addition, if the loop is printing the same image, internally the id is not correctly set from GraphQL when created the data node from Strapi. You can customize the GraphQL node schema to add custom parameters in order to bypass this limitation using different APIs provided by Gatsby, createRemoteFileNode should fit your requirements.

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

Source: How to query multiple images in Gatsby from Strapi using Graphql

Depending on your data structure, you may need to change the loop and some other parameters. In this case, images are inside a category node so, it has to be inferred by nesting two different loops.

The idea is to loop through all your image nodes and add the localFile___NODE field with:

  image.localFile___NODE = fileNode.id;

The id is previously created in:

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

来源：https://stackoverflow.com/questions/65617024/mapping-array-of-images-leads-to-the-same-image-repeating-on-every-instance

标签

javascript

reactjs

graphql

gatsby