React.js访问JSON数据渲染Avatars时出现重复与首字母显示异常问题

问题根因 #

• Avatar重复：绝大多数场景是渲染列表时使用数组索引作为key值，React虚拟DOM Diff机制会误判节点复用规则，导致旧节点内容被错误复用；少数场景为原始用户JSON数据存在重复ID项，未做前置去重处理。
• 首字母显示错误：首字母提取逻辑未做兼容处理，对空用户名、含特殊符号的用户名、中/英混合用户名的切割规则不符合预期，也没有兜底展示逻辑。

修复方案 #

1. 先对原始用户JSON做去重校验，以用户唯一ID作为去重标识：

// 数组去重逻辑
const uniqueUserList = Array.from(new Map(originUserList.map(user => [user.id, user])).values())

2. 实现兼容多场景的首字母提取函数，增加兜底逻辑：

const getFirstLetter = (username) => {
  // 空值兜底
  if (!username || typeof username !== 'string') return 'U'
  // 匹配中文字符，优先返回第一个中文字符
  const cnCharMatch = username.match(/[\u4e00-\u9fa5]/)
  if (cnCharMatch) return cnCharMatch[0]
  // 匹配英文字符，统一转大写，无匹配值兜底
  const enCharMatch = username.match(/[a-zA-Z]/)
  return enCharMatch ? enCharMatch[0].toUpperCase() : 'U'
}

3. 渲染列表时绑定唯一key，不要使用数组索引作为key：

// 横向排列Avatar容器样式可根据需求调整
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
  {uniqueUserList.map(user => (
    <Avatar key={user.id} src={user.avatarUrl}>
      {getFirstLetter(user.nickname)}
    </Avatar>
  ))}
</div>

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