React搜索高亮功能的Key唯一性问题求解

核心思路 #

通过父元素唯一标识 + 拆分项索引 + 拆分项内容生成复合Key，既规避ESLint对索引Key的警告，又保证每个子元素Key全局唯一。

步骤1：修改高亮函数，支持传入父元素唯一标识 #

调整getHighlightedText，新增parentKey参数，用它和拆分项的索引、内容组合成唯一Key：

const getHighlightedText = useCallback((text, highlight, parentKey) => {
  // 处理搜索词为空的边界情况，避免不必要的拆分
  if (!highlight) return <span>{text}</span>;

  // 按搜索词拆分文本，保留搜索词本身，忽略大小写
  const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
  
  return (
    <span>
      {parts.map((part, i) => (
        <span
          // 生成复合唯一Key：父元素标识 + 索引 + 内容小写值（避免大小写导致的重复）
          key={`${parentKey}-${i}-${part.toLowerCase()}`}
          className={
            part.toLowerCase() === highlight.toLowerCase() ? 'text-black' : ''
          }
        >
          {part}
        </span>
      ))}
    </span>
  );
}, []);

步骤2：调用高亮函数时传入父元素唯一标识 #

在渲染搜索结果的循环中，基于每条数据的字段生成唯一的parentKey（如果有后端返回的唯一ID，优先用ID替代标题+分类ID的组合）：

{item?.map((data) => {
  // 生成当前列表项的唯一标识，作为高亮函数的parentKey
  const parentKey = `${data.title}-${data?.action?.categoryId}`;
  
  return (
    <li key={parentKey}>
      {getHighlightedText(
        data.title,
        searchTerm,
        parentKey
      )}
    </li>
  );
})}

方案说明 #

1. 解决ESLint警告：不再单独使用数组索引作为Key，复合Key包含数据相关的稳定标识，符合React对Key的设计要求。
2. 避免重复Key错误：每个拆分后的文本片段Key都绑定了所属列表项的唯一标识，即使不同列表项有相同的文本片段，Key也不会重复。

内容的提问来源于stack exchange，提问作者H.Husain