React页面刷新后保持相同uniqueID对应固定随机颜色

你当前代码失效的核心原因是内存中的Map会在页面重载时被清空，另外代码本身存在变量名笔误：返回值处引用了未定义的colorMapping和id，和前文定义的colorMap、入参uniqueId不匹配。
以下两种方案都可以实现刷新后相同uniqueID对应固定随机色的需求：

方案1：本地存储持久化映射关系 #

适合后续需要手动调整ID对应颜色的场景，用localStorage做持久化存储，页面初始化时读取已保存的映射，新生成的颜色同步写入本地存储，刷新后数据不会丢失。

// 初始化时优先读取本地已存储的颜色映射
const initColorMap = (): Map<number, string> => {
  const savedMap = localStorage.getItem('idColorMapping');
  return savedMap ? new Map(JSON.parse(savedMap)) : new Map<number, string>();
};
const colorMap = initColorMap();

// 映射变更时同步写入本地存储
const syncMapToStorage = () => {
  localStorage.setItem('idColorMapping', JSON.stringify(Array.from(colorMap.entries())));
};

// 修复原随机色函数位数不足的问题
const getRandomColor = (): string => {
  return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
};

const setColor = (uniqueId: number): string => {
  if (!colorMap.has(uniqueId)) {
    colorMap.set(uniqueId, getRandomColor());
    syncMapToStorage();
  }
  return colorMap.get(uniqueId) as string;
};

// 业务中直接调用即可
// color: setColor(Number(d_id))

注意：该方案依赖本地存储，如果用户手动清空浏览器站点数据，映射关系会重置。

方案2：基于ID确定性生成固定颜色（推荐） #

不需要维护任何存储和映射表，通过固定哈希算法直接将uniqueID转换为对应的颜色值，只要ID不变，生成的颜色永远一致，完全不受刷新、清缓存、跨页面打开的影响，实现更轻量稳定。

const getColorByUniqueId = (uniqueId: number): string => {
  // 固定哈希算法，相同输入永远返回相同哈希值
  let hash = 0;
  const idStr = String(uniqueId);
  for (let i = 0; i < idStr.length; i++) {
    hash = idStr.charCodeAt(i) + ((hash << 5) - hash);
  }
  // 将哈希值转换为十六进制颜色，固定补全位数避免无效色值
  let color = '#';
  for (let j = 0; j < 3; j++) {
    const value = (hash >> (j * 8)) & 0xFF;
    color += value.toString(16).padStart(2, '0');
  }
  // 如果需要控制颜色亮度/饱和度，可以在这里加固定转换逻辑，比如统一转成高饱和低亮度的可阅读色
  return color;
};

// 业务中直接调用，不需要提前初始化映射
// color: getColorByUniqueId(Number(d_id))

• 无额外存储开销，不存在数据丢失问题，适合不需要自定义修改颜色的纯展示场景
• 可以通过调整哈希后的颜色转换规则，避免生成过浅/过暗、和文字对比度不足的颜色

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