如何在不重新渲染整个组件的情况下更新 NextJS 中 <Image /> 标签的 src

Question

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

<Image
  src={itemDetails.imageUrls[0].imageUrl}
  alt="Product Image"
  layout="responsive"
  height="500"
  width="400"
/>

我想根据其他一些图片上的 onClick 将此 src 更改为 {itemDetails.imageUrls[1].imageUrl} 或 {itemDetails.imageUrls[2].imageUrl}。

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

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

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

但是当我这样替换 imageLink 时：

<Image
  src={imageLink}
  alt="Product Image"
  layout="responsive"
  height="500"
  width="400"
/>

这是 handleProductClick 的调用方式：

{itemDetails.imageUrls.map((image, index) => {
    return (
       <div className="mr-2 cursor-pointer" key={index}>
       <Image
         src={image.imageUrl}
         alt="Product Image"
         height="80"
         width="70"
         onClick={() => {
         handleProductClick(index);
         }}
        />
       </div>
      );
    })}

它显示太多重新渲染错误，像这样：

Answer 1

我是这样做的：

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

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

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

<Image
   src={itemDetails.imageUrls[imageIndex].imageUrl}
   alt="Product Image"
   layout="responsive"
   height="500"
   width="400"
/>

如何在不重新渲染整个组件的情况下更新 NextJS 中 <Image /> 标签的 src

How to update src of <Image /> tag in NextJS without re-rendering the whole component

reactjs

next.js

use-state

react-component

nextjs-image