小编Tim*_*m R的帖子

我目前正在尝试使用react-responsive-carousel 和react-image-magnifiers 来生产查看器。它基于https://github.com/AlexTechNoir/Next.js-e-commerce-online-store#nextjs-e-commerce-store中的示例。我似乎无法解决的问题是如何映射自定义缩略图以正确显示。当我对数组进行硬编码时，它工作正常，但是当我尝试动态映射时，所有缩略图都呈现在同一数组中（幻灯片图像和放大镜工作正常。）我正在使用 Next js v10.0.4、Node v14 .3.0 这是我的代码：

产品滑块.js

 import { Carousel } from 'react-responsive-carousel'
 import { SideBySideMagnifier } from 'react-image-magnifiers'
 import {  API_URL } from '../../utils/urls'
 import {fromImageToUrl} from '../../utils/urls'


 //Map Image Slider Function

 export default function ProductSlider({ product }) {
 const images = product.productImages




 const  renderCustomThumbs =() => {

   
  const siteUrl = API_URL
  const thumbList = images.map((product, index) => 
  <picture key={index}>
  <source data-srcSet={`${siteUrl}${product.url}`} type="image/jpg" />
    <img
      key={product._id}
      src= {`${siteUrl}${product.url}`}
      alt={product.alternativeText}
      height="70"
    />
    
  </picture>,
  )
  return …