From 592c5eeab9a8ff4432a0a4c4f1231792b91b726a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com>
Date: Tue, 8 Nov 2022 12:40:14 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/list/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/index.tsx b/components/list/index.tsx
index 32d12e07610a..f0b945a086d4 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -137,7 +137,7 @@ function List<T>({
 
     listItemsKeys[index] = key;
 
-    return renderItem(item, index);
+    return <React.Fragment key={key}>{renderItem(item, index)}</React.Fragment>;
   };
 
   const isSomethingAfterLastItem = () => !!(loadMore || pagination || footer);

From 4b071a13a2bd64c487b5617a6133a0c9f84b00ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com>
Date: Tue, 8 Nov 2022 14:41:34 +0800
Subject: [PATCH 2/5] feat: remove old key

---
 components/list/index.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/list/index.tsx b/components/list/index.tsx
index f0b945a086d4..c98310c3937a 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -104,8 +104,6 @@ function List<T>({
     total: 0,
   };
 
-  const listItemsKeys: { [index: number]: React.Key } = {};
-
   const triggerPaginationEvent = (eventName: string) => (page: number, pageSize: number) => {
     setPaginationCurrent(page);
     setPaginationSize(pageSize);
@@ -135,8 +133,6 @@ function List<T>({
       key = `list-item-${index}`;
     }
 
-    listItemsKeys[index] = key;
-
     return <React.Fragment key={key}>{renderItem(item, index)}</React.Fragment>;
   };
 
@@ -249,8 +245,8 @@ function List<T>({
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   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) => (
-      <div key={listItemsKeys[index]} style={colStyle}>
+    const childrenList = React.Children.map(items, child => (
+      <div key={child?.key} style={colStyle}>
         {child}
       </div>
     ));

From 1b37b76d89dcc5bc60a12f02388466123d558780 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com>
Date: Wed, 9 Nov 2022 16:17:44 +0800
Subject: [PATCH 3/5] feat: test

---
 components/list/__tests__/Item.test.tsx | 28 ++++++++++++++++++++++++-
 components/list/index.tsx               | 13 ++++++------
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/components/list/__tests__/Item.test.tsx b/components/list/__tests__/Item.test.tsx
index da730596287c..7b1433905415 100644
--- a/components/list/__tests__/Item.test.tsx
+++ b/components/list/__tests__/Item.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import List from '..';
 import { render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
@@ -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 <div>{id}</div>;
+    };
+    const getDom = (id = 1) => (
+      <List
+        dataSource={[{ id, title: `ant design` }]}
+        rowKey={item => item.id}
+        renderItem={item => (
+          <List.Item>
+            <Demo id={item.id} />
+          </List.Item>
+        )}
+      />
+    );
+    const { rerender } = render(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 c98310c3937a..28c002067c36 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -245,13 +245,14 @@ function List<T>({
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
-    const childrenList = React.Children.map(items, child => (
-      <div key={child?.key} style={colStyle}>
-        {child}
-      </div>
-    ));
     childrenContent = grid ? (
-      <Row gutter={grid.gutter}>{childrenList}</Row>
+      <Row gutter={grid.gutter}>
+        {React.Children.map(items, child => (
+          <div key={child?.key} style={colStyle}>
+            {child}
+          </div>
+        ))}
+      </Row>
     ) : (
       <ul className={`${prefixCls}-items`}>{items}</ul>
     );

From 7f52211397871003f8a5ea6e8b7e0750ce6613ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com>
Date: Wed, 9 Nov 2022 17:16:32 +0800
Subject: [PATCH 4/5] feat: test

---
 components/list/index.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/list/index.tsx b/components/list/index.tsx
index 28c002067c36..c98310c3937a 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -245,14 +245,13 @@ function List<T>({
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
+    const childrenList = React.Children.map(items, child => (
+      <div key={child?.key} style={colStyle}>
+        {child}
+      </div>
+    ));
     childrenContent = grid ? (
-      <Row gutter={grid.gutter}>
-        {React.Children.map(items, child => (
-          <div key={child?.key} style={colStyle}>
-            {child}
-          </div>
-        ))}
-      </Row>
+      <Row gutter={grid.gutter}>{childrenList}</Row>
     ) : (
       <ul className={`${prefixCls}-items`}>{items}</ul>
     );

From 74675244c9f579f1ac3d3709216cce3ec82d48ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com>
Date: Wed, 9 Nov 2022 17:35:31 +0800
Subject: [PATCH 5/5] feat: test

---
 components/list/__tests__/Item.test.tsx |  4 ++--
 components/list/index.tsx               | 13 +++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/list/__tests__/Item.test.tsx b/components/list/__tests__/Item.test.tsx
index 7b1433905415..2bf574d1c9b5 100644
--- a/components/list/__tests__/Item.test.tsx
+++ b/components/list/__tests__/Item.test.tsx
@@ -1,6 +1,6 @@
 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', () => {
@@ -225,7 +225,7 @@ describe('List Item Layout', () => {
         )}
       />
     );
-    const { rerender } = render(getDom(1));
+    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 c98310c3937a..28c002067c36 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -245,13 +245,14 @@ function List<T>({
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
-    const childrenList = React.Children.map(items, child => (
-      <div key={child?.key} style={colStyle}>
-        {child}
-      </div>
-    ));
     childrenContent = grid ? (
-      <Row gutter={grid.gutter}>{childrenList}</Row>
+      <Row gutter={grid.gutter}>
+        {React.Children.map(items, child => (
+          <div key={child?.key} style={colStyle}>
+            {child}
+          </div>
+        ))}
+      </Row>
     ) : (
       <ul className={`${prefixCls}-items`}>{items}</ul>
     );