React列表子元素需唯一key prop警告，找不到缺失key的位置

云上老周

2026-10-4

错误根源

你在遍历contract.features生成功能列表时，map回调返回的顶级元素是<ul>，但你仅给内部的<li>添加了key属性，map生成的每一个<ul>节点本身没有配置唯一key，这就是触发警告的原因。

问题代码片段

feature={
  contract.features.map((feature, index) => 
    // 此处ul是map生成的直接子节点，未加key
    <ul role="list" className="mt-6 space-y-6">
      <li className="flex" key={feature.id} >
        {console.log(feature.id)}
        <CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
        {feature.name}
      </li>
    </ul>
)}

修复方案

方案1（快速修复）

将key属性移到<ul>标签上即可：

feature={
  contract.features.map((feature, index) => 
    <ul role="list" className="mt-6 space-y-6" key={feature.id}>
      <li className="flex" >
        {console.log(feature.id)}
        <CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
        {feature.name}
      </li>
    </ul>
)}

方案2（优化语义结构，更推荐）

你当前的写法会给每个功能项都单独包裹一个<ul>列表容器，语义不合理，建议把<ul>提至map外层，仅循环生成<li>节点，从结构层面避免同类问题：

feature={
  <ul role="list" className="mt-6 space-y-6">
    {contract.features.map((feature) => (
      <li className="flex" key={feature.id}>
        <CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
        {feature.name}
      </li>
    ))}
  </ul>
}