Bug: 未能正常识别唯一 key

[Gausons]

浏览器报错 Warning: Each child in a list should have a unique "key" prop.

Check the render method of ButtonGroupDown. See https://reactjs.org/link/warning-keys for more information. at ButtonGroupDown (http://localhost:8000/common-async.js:38276:13) at td at Cell (http://localhost:8000/umi.js:130802:33) at tr at BodyRow (http://localhost:8000/umi.js:130478:33) at ImmutableComponent (http://localhost:8000/umi.js:13715:13) at tbody at Body (http://localhost:8000/umi.js:130688:33) at ImmutableComponent (http://localhost:8000/umi.js:13715:13) at table at div at div at div at DomWrapper (http://localhost:8000/umi.js:125358:37) at SingleObserver (http://localhost:8000/umi.js:125394:26) at ResizeObserver (http://localhost:8000/umi.js:125509:26) at Provider (http://localhost:8000/umi.js:13758:26) at Table (http://localhost:8000/umi.js:131637:31) at ImmutableComponent (http://localhost:8000/umi.js:13691:41) at div at div at Spin (http://localhost:8000/umi.js:53905:28) at SpinFC (http://localhost:8000/umi.js:53982:24) at div at InternalTable (http://localhost:8000/umi.js:57633:24) at Table (http://localhost:8000/umi.js:57997:35) at http://localhost:8000/common-async.js:12000:61 at http://localhost:8000/common-async.js:6683:13 at div at div at div at div at div at TestCaseStashDetail (http://localhost:8000/src_pages_testManagement_testCaseStashDetail_index_tsx-async.js:3617:41) at Suspense at RemoteComponent (http://localhost:8000/umi.js:17732:27) at Outlet (http://localhost:8000/umi.js:169644:28) at div at div at http://localhost:8000/vendors_1-async.js:24891:27 at div at div at div at GridContent (http://localhost:8000/vendors_1-async.js:42286:39) at div at PageContainerBase (http://localhost:8000/vendors_1-async.js:43816:26) at ProConfigProvider (http://localhost:8000/vendors_1-async.js:49686:26) at PageContainer at div at main at http://localhost:8000/umi.js:40174:24 at Content at ErrorBoundary (http://localhost:8000/vendors_1-async.js:59359:37) at WrapContent (http://localhost:8000/vendors_1-async.js:40709:45) at div at div at http://localhost:8000/umi.js:40190:34 at Layout at div at BaseProLayout (http://localhost:8000/vendors_1-async.js:40348:15) at MotionWrapper (http://localhost:8000/umi.js:28689:13) at ProviderChildren (http://localhost:8000/umi.js:29154:13) at ConfigProvider (http://localhost:8000/umi.js:29330:28) at SWRConfig (http://localhost:8000/vendors_1-async.js:147555:13) at ConfigProviderContainer (http://localhost:8000/vendors_1-async.js:49546:26) at LocaleProvider (http://localhost:8000/umi.js:41348:13) at MotionWrapper (http://localhost:8000/umi.js:28689:13) at ProviderChildren (http://localhost:8000/umi.js:29154:13) at ConfigProvider (http://localhost:8000/umi.js:29330:28) at ProConfigProvider (http://localhost:8000/vendors_1-async.js:49686:26) at MotionWrapper (http://localhost:8000/umi.js:28689:13) at ProviderChildren (http://localhost:8000/umi.js:29154:13) at ConfigProvider (http://localhost:8000/umi.js:29330:28) at ProLayout (http://localhost:8000/vendors_1-async.js:40664:30) at div at div at Watermark (http://localhost:8000/umi.js:70672:9) at LocaleProvider (http://localhost:8000/umi.js:41348:13) at MotionWrapper (http://localhost:8000/umi.js:28689:13) at ProviderChildren (http://localhost:8000/umi.js:29154:13) at ConfigProvider (http://localhost:8000/umi.js:29330:28) at Component$$ (http://localhost:8000/src_layouts_index_tsx-async.js:191:40) at Suspense at RemoteComponent (http://localhost:8000/umi.js:17732:27) at Routes (http://localhost:8000/umi.js:17229:50) at Router (http://localhost:8000/umi.js:169662:21) at BrowserRoutes (http://localhost:8000/umi.js:17186:25) at r (http://localhost:8000/umi.js:166111:23) at Provider (http://localhost:8000/umi.js:166778:21) at RootContainer (http://localhost:8000/umi.js:181152:51) at Browser (http://localhost:8000/umi.js:17290:45)

**相关组件代码**

import { Space, Dropdown, Button } from 'antd'; import type { DropdownProps } from 'antd'; import { Link, useSelector } from 'umi'; import { ReactNode, useEffect, useState } from 'react'; type SizeType = 'small' | 'middle' | 'large' | undefined; type SpaceSize = SizeType | number; interface IItem { key: string | number; label: string | ReactNode; onClick?: Function; hide?: boolean; disabled?: boolean; } interface IProps { buttons: IItem[]; // 按钮集合 moreCount?: number; // 几个后显示更多 moreFn?: Function; // 更多按钮点击逻辑 dropdownOptions?: DropdownProps; dropdownInner?: string | ReactNode; SpaceSize?: SpaceSize | [SpaceSize, SpaceSize]; dropdownClick?: Function; scope?: any; //表格数据 }

const ButtonGroupDown = (props: IProps) => { const { buttons, moreCount = 2, dropdownOptions = {}, SpaceSize = 'middle', dropdownInner = '更多', dropdownClick, scope, } = props; const [outBtn, setOutBtn] = useState<IItem[]>([]); const [innerBtn, setInnerBtn] = useState<any[]>([]); useEffect(() => { if (!Array.isArray(buttons)) return; const arr: IItem[] = buttons.filter((item): any => !item.hide); setOutBtn(arr.filter((item, index) => index < moreCount)); setInnerBtn(arr.filter((item, index) => index >= moreCount)); }, [buttons]); return (

{outBtn?.map((item, index) => { return ( <> {item.label && typeof item.label === 'object' && item?.label?.$$typeof === Symbol.for('react.element') ? ( item.label ) : ( item.onClick && item.onClick(item, e)} > {item.label} )} ); })} {innerBtn?.length ? ( { dropdownClick && dropdownClick(val, scope); }, }} > {dropdownInner && typeof dropdownInner === 'object' && // @ts-ignore dropdownInner?.$$typeof === Symbol.for('react.element') ? ( dropdownInner ) : ( {dropdownInner} )} ) : null}

); }; export default ButtonGroupDown;

环境： node: v18.20.3 umi:4.2.0

[stormslowly]

有最简复现吗？

有没有可能运行时 key 是 undefined ？

[sorrycc]

Will be reopened when reproduction is supplied.