如何正确使用 map 函数获取数组中元素的索引？

Question

你好，我正在尝试使用 map 查找数组中元素的索引，以便最终我可以创建一个 onClick 函数，该函数将根据该索引更改图像。

然而，当我将索引添加到我的地图函数时，我收到一条错误消息，指出 img 未定义。

const currentIndex = 0;

const gallery = 
  product.images.length > 1 ? (
    <Grid gap={2} columns={5}>
      {product.images.map(img, index => (
        <GatsbyImage 
          image={img.gatsbyImageData}
          key={img.id}
          alt={product.title}
        />
      ))}
    </Grid>
  ) : null;

以上代码显示缩略图大小的图像列表。我希望最终能够点击每张图片并显示更大的图片。

下面是大图的代码。

<div>
  <GatsbyImage
    image={product.images[currentIndex].gatsbyImageData}
    alt={product.title}
  />
  {gallery}
</div>

Answer 1

简单的括号修复：

const currentIndex = 0;

const gallery = 
  product.images.length > 1 ? (
    <Grid gap={2} columns={5}>
      {product.images.map((img, index) => (
        <GatsbyImage 
          image={img.gatsbyImageData}
          key={img.id}
          alt={product.title}
        />
      ))}
    </Grid>
  ) : null;

确保不要将两个值传递给 Array.map，而是将一个值传递给 Array.map：一个函数，它有自己的可选参数 'index'

考虑将您的工作扩展到一个您可以引用的函数，让生活更轻松，代码更清晰，如下所示：

const currentIndex = 0;

const mapper = (img, index) => (
  <GatsbyImage image={img.gatsbyImageData} key={img.id} alt={product.title} />
);

const gallery =
  product.images.length > 1 ? (
    <Grid gap={2} columns={5}>
      {product.images.map(mapper)}
    </Grid>
  ) : null;

在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#syntax

如何正确使用 map 函数获取数组中元素的索引？

How do I properly use the map function to get the index of the element in the array?

javascript

arrays

shopify

reactjs

gatsby