如何在 NextJS 中更新 <Image /> 标签的 src 而无需重新渲染整个组件

Posted 2023-03-06

【中文标题】如何在 NextJS 中更新 <Image /> 标签的 src 而无需重新渲染整个组件

【英文标题】：How to update src of <Image /> tag in NextJS without re-rendering the whole component

【发布时间】：2021-12-16 18:24:07

【问题描述】：

我想通过使用新链接更新 src 来更改 NextJS 中 <Image /> 标记的图像，但它显示了太多的重新渲染。

<Image
  src=itemDetails.imageUrls[0].imageUrl
  
  layout="responsive"
  
  
/>

我想把这个src改成itemDetails.imageUrls[1].imageUrl或者itemDetails.imageUrls[2].imageUrl根据onClick其他一些图片。

我有一个函数来获取imageUrls 的索引。例如：0、1、2等

const handleProductClick = (index) => 
  let clickedImageLink = itemDetails.imageUrls[index].imageUrl;
  setImageLink(clickedImageLink);
;

这里setImageLink用作状态（useState），可以使用imageLink访问。

但是当我像这样替换imageLink 时：

<Image
  src=imageLink
  
  layout="responsive"
  
  
/>

handleProductClick 的调用方式如下：

itemDetails.imageUrls.map((image, index) => 
    return (
       <div className="mr-2 cursor-pointer" key=index>
       <Image
         src=image.imageUrl
         
         
         
         onClick=() => 
         handleProductClick(index);
         
        />
       </div>
      );
    )

它显示 Too Many Re-renders 错误，如下所示：

【问题讨论】：

从哪里调用handleProductClick？您能否显示发生错误的组件的完整代码？

@AnoopV 代码中有useEffect吗？

@ChemiAdel 没有UseEffect，只有1个useState

为什么需要更新src？

@AnoopV 这仍然不足以重现问题。能否请您发布完整组件的代码？

【参考方案1】：

我就是这样做的：

  const [imageIndex, setImageIndex] = useState(0);

  const handleProductClick = (index) => 
      setImageIndex(index);
  ;

当点击图片时，它会像这样更新：

<Image
   src=itemDetails.imageUrls[imageIndex].imageUrl
   
   layout="responsive"
   
   
/>