如何在NextJS中更新<Image />的src且避免触发组件过多重渲染报错

问题原因 #

• 事件处理函数未缓存：handleProductClick未被缓存，每次组件重渲染都会生成新的函数实例，引发所有缩略图组件批量重渲染，形成循环
• 初始状态赋值异常：imageLink初始值依赖异步加载的itemDetails，数据未返回时取值报错，触发重复渲染
• 渲染key不规范：使用数组下标作为列表key，数组变化时DOM复用异常引发额外重渲染

修复步骤 #

1. 缓存点击处理函数 #

使用useCallback包裹事件处理函数，固定函数引用，避免不必要的重渲染：

import { useCallback } from 'react';

const handleProductClick = useCallback((index) => {
  // 增加可选链防御，避免数组越界报错
  const clickedImageLink = itemDetails.imageUrls[index]?.imageUrl;
  if (clickedImageLink) {
    setImageLink(clickedImageLink);
  }
}, [itemDetails, setImageLink]);

2. 规范状态初始化逻辑 #

异步数据场景下，使用useEffect监听数据加载状态，再初始化主图链接：

import { useState, useEffect } from 'react';

// 初始值设为空字符串或占位图地址
const [imageLink, setImageLink] = useState('');

// 待商品数据加载完成后赋值初始主图
useEffect(() => {
  if (itemDetails?.imageUrls?.length) {
    setImageLink(itemDetails.imageUrls[0].imageUrl);
  }
}, [itemDetails]);

3. 优化列表渲染key #

优先使用图片的唯一ID作为渲染key，仅当没有唯一标识时再用下标兜底：

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

内容的提问来源于stack exchange，提问作者Anoop V