fix(VirtualList): stabilize children keys in virtual list

alibaba-fusion · Sep 20, 2024 · f3d1d81 · f3d1d81
1 parent cc20770
commit f3d1d81
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/components/virtual-list/__tests__/index-spec.tsx b/components/virtual-list/__tests__/index-spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import VirtualList from '../index';
 import '../style';
 
@@ -191,4 +191,30 @@ describe('VirtualList', () => {
         cy.mount(<App />);
         cy.get('.test').should('exist');
     });
+    describe('issue', () => {
+        it('should not change children key, issue #4942', () => {
+            const handleItemsRender = cy.spy();
+            cy.mount(
+                <div
+                    className="scrollBox"
+                    style={{
+                        height: '200px',
+                        width: '200px',
+                        overflow: 'auto',
+                    }}
+                >
+                    <VirtualList
+                        itemsRenderer={(items, ref) => {
+                            handleItemsRender((items[0] as ReactElement).key);
+                            return <ul ref={ref}>{items}</ul>;
+                        }}
+                        jumpIndex={50}
+                    >
+                        {generateData(100)}
+                    </VirtualList>
+                </div>
+            );
+            cy.wrap(handleItemsRender).should('be.calledWith', '0-test');
+        });
+    });
 });
diff --git a/components/virtual-list/virtual-list.tsx b/components/virtual-list/virtual-list.tsx
@@ -5,6 +5,7 @@ import React, {
     type LegacyRef,
     type CSSProperties,
     type ReactInstance,
+    type ReactElement,
 } from 'react';
 import cx from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
@@ -395,10 +396,14 @@ class VirtualList extends Component<VirtualListProps, VirtualListState> {
         const { from, size } = this.state;
         const items = [];
 
-        const childrenArray = Children.toArray(children);
+        const childrenArray: Array<ReactElement | undefined | null> = [];
+
+        Children.forEach(children, (child: ReactElement | undefined | null) => {
+            childrenArray.push(child);
+        });
 
         for (let i = 0; i < size!; ++i) {
-            items.push(childrenArray![from + i]);
+            items.push(childrenArray[from + i]);
         }
 
         return itemsRenderer!(items, c => {