如何在表格中正确渲染多个Base64格式头像并解决缓存不显示问题

问题根因 #

你遇到的Base64头像首次不渲染、重渲染后才正常显示的问题，核心原因是状态更新不符合React的不可变原则，导致组件没有正确触发重渲染：

• 你在异步回调中直接修改了原有uData数组的元素属性，没有生成新的数组引用，React浅比较状态时会认为状态未发生变化，跳过对应渲染步骤。等到排序操作触发全局重渲染时，已经更新完成的uData值才会被应用到视图上，所以头像都能正常显示。
• 网络面板的多余请求，大概率是头像src为空/undefined时，Avatar组件将空值识别为相对路径，自动发起了无效请求。

解决办法 #

1. 修改状态更新逻辑，遵循不可变原则 #

不要直接修改原数组的元素属性，每次更新都生成新的数组和元素对象，确保React能正确识别状态变化：

uniqueReferrals.forEach(({ gpReferralUuid, state }, idx) => {        
  if (gpReferralUuid && state !== "hqSent") {          
    healthQuestionnaireReviewService            
      .getPatientThumbanils(gpReferralUuid)            
      .then((res) => {              
        const { hasPhotos } = res;              
        if (hasPhotos) {                
          const frontThumbnail = res.photos.frontThumbnail;
          // 生成新数组，不修改原uData
          const newData = [...uData];
          // 生成新的元素对象，不修改原元素属性
          newData[idx] = { ...newData[idx], avatar: frontThumbnail };
          setReferralSummary(newData);              
        }            
      })            
      .catch((error) => {});        
  }      
});

2. 给Avatar组件添加唯一标识避免复用缓存 #

给Avatar组件绑定包含头像值的唯一key，只要Base64内容变化，组件就会重新渲染，不会复用旧的缓存实例：

<Avatar    
  className={classes.avatar}
  // 用业务唯一id+头像值作为key，确保内容变化时组件重渲
  key={`${row.gpReferralUuid}-${row.avatar}`}
  src={row.avatar || ''}
  alt="Thumbnail"
/>

3. 处理空值避免多余请求 #

可以给avatar设置默认的占位Base64，或者空值时不传入src属性，避免组件发起无效请求。比如1px透明图片的占位Base64：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

4. 校验Base64格式 #

确认返回的frontThumbnail包含完整的图片格式前缀，比如data:image/png;base64,，缺失前缀时部分组件会将Base64内容识别为普通URL发起请求，导致渲染失败。

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