React报错：列表子项需唯一key属性，已添加key仍报错求解

你遇到的问题是React要求key必须绑定在map循环生成的直接子组件/元素上，而非组件内部的嵌套元素。

你的代码里把key加在了SearchFilterCategory组件内部的<li>标签上，但React的key校验是针对map返回的每一项——也就是<SearchFilterCategory>这个组件本身（它才是ul的直接子元素），所以React无法识别你放在组件内部的key，依然会触发报错。

修改方案： #

1. 在SearchFilterMenu.tsx中给SearchFilterCategory添加key

return (
    <>
        <ul className="list-unstyled">
            {searchFilterData?.map((data) => (
                <SearchFilterCategory key={data.id} filter={data} />
            ))}
        </ul>
    </>
)

2. 移除SearchFilterCategory.tsx中<li>的key

export default function SearchFilterCategory(props: {filter: SearchFilter}) {
    return (
            <li>
                {props.filter.name}
            </li>
    )
}

核心原因： #

React通过key追踪列表项的身份，确保列表更新时能正确复用和重新渲染元素。这个key必须直接关联到map迭代生成的最外层节点，而非嵌套在组件内部的元素——因为React处理列表渲染时，只会检查map返回的每一项有没有key，不会深入组件内部查找。

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