React列表子元素缺少唯一key prop定位求助

问题定位 #

你遇到的错误提示，根源在两处menu.map循环里：你用无key的空Fragment（<>）作为循环返回项的最外层容器，却把key加在了内部的DropdownMenu和Link组件上。而React要求循环生成的每个子项的最顶层元素必须携带唯一key，这才导致了报错。

修复方案 #

空Fragment（<>）不支持添加key属性，需要替换为完整的<React.Fragment>并绑定key，也可以用带key的普通容器元素（比如div）。以下是两处循环的修复代码：

第一处桌面端菜单循环修复 #

{menu.map((item, index) => (
    <React.Fragment key={index}>
        {item.children && item.children.length > 0 ? (
            <DropdownMenu
                menu={item}
                items={item.children}
                mobile={props.mobile}
            />
        ) : (
            <Link href={item.href}>
                <a
                    className=" py-2 px-5 font-medium text-gray-600 dark:text-gray-400 hover:text-blue-500 outline-none focus-visible:text-blue-500 focus-visible:ring-2 rounded-full ring-blue-100"
                    target={item.external ? "_blank" : ""}
                    rel={item.external ? "noopener" : ""}>
                    {item.label}
                </a>
            </Link>
        )}
    </React.Fragment>
))}

第二处移动端菜单循环修复 #

{menu.map((item, index) => (
    <React.Fragment key={index}>
        {item.children && item.children.length > 0 ? (
            <DropdownMenu
                menu={item}
                items={item.children}
                mobile={true}
            />
        ) : (
            <Link href={item.href}>
                <a
                    className=" py-2 px-5   text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-blue-500 outline-none focus-visible:text-blue-500 focus-visible:ring-2 rounded-full ring-blue-100"
                    target={item.external ? "_blank" : ""}
                    rel={item.external ? "noopener" : ""}>
                    {item.label}
                </a>
            </Link>
        )}
    </React.Fragment>
))}

额外建议 #

尽量别用index作为key，如果你的menu数组里每个项有唯一标识（比如id字段），优先用这个字段当key，能避免列表项顺序变化时引发的不必要渲染问题。

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