diff --git a/components/list/__tests__/Item.test.tsx b/components/list/__tests__/Item.test.tsx
index da730596287c..2bf574d1c9b5 100644
--- a/components/list/__tests__/Item.test.tsx
+++ b/components/list/__tests__/Item.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import List from '..';
-import { render } from '../../../tests/utils';
+import { pureRender, render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
describe('List Item Layout', () => {
@@ -204,4 +204,30 @@ describe('List Item Layout', () => {
);
expect(ref.current).toHaveClass('ant-col');
});
+ it('react key', () => {
+ const loadId: number[] = [];
+
+ const Demo = ({ id }: { id: number }) => {
+ useEffect(() => {
+ loadId.push(id);
+ }, []);
+
+ return
{id}
;
+ };
+ const getDom = (id = 1) => (
+ item.id}
+ renderItem={item => (
+
+
+
+ )}
+ />
+ );
+ const { rerender } = pureRender(getDom(1));
+ rerender(getDom(3));
+ rerender(getDom(5));
+ expect(loadId).toEqual([1, 3, 5]);
+ });
});
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 32d12e07610a..28c002067c36 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -104,8 +104,6 @@ function List({
total: 0,
};
- const listItemsKeys: { [index: number]: React.Key } = {};
-
const triggerPaginationEvent = (eventName: string) => (page: number, pageSize: number) => {
setPaginationCurrent(page);
setPaginationSize(pageSize);
@@ -135,9 +133,7 @@ function List({
key = `list-item-${index}`;
}
- listItemsKeys[index] = key;
-
- return renderItem(item, index);
+ return {renderItem(item, index)};
};
const isSomethingAfterLastItem = () => !!(loadMore || pagination || footer);
@@ -249,13 +245,14 @@ function List({
let childrenContent = isLoading && ;
if (splitDataSource.length > 0) {
const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
- const childrenList = React.Children.map(items, (child: React.ReactNode, index: number) => (
-
- {child}
-
- ));
childrenContent = grid ? (
- {childrenList}
+
+ {React.Children.map(items, child => (
+
+ {child}
+
+ ))}
+
) : (
);