fix(Menu): update fix menu async load items renderMore issues, close a…

…libaba-fusion#4660
seven-lh · Jan 22, 2024 · 42a2a37 · 42a2a37
1 parent c22f143
commit 42a2a37
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/components/menu/__tests__/index-spec.js b/components/menu/__tests__/index-spec.js
@@ -978,7 +978,7 @@ describe('Menu', () => {
         document.body.removeChild(div);
     });
 
-    it('should show renderMore when hozInLine & async load more items ', () => {
+    it('should show renderMore when hozInLine & async load more items ', done => {
         const div = document.createElement('div');
         document.body.appendChild(div);
 
@@ -987,7 +987,7 @@ describe('Menu', () => {
           items.push(i);
         }
         function App() {
-          const [categoryList, setCategoryList] = useState(items);
+          const [categoryList, setCategoryList] = useState([]);
           useEffect(() => {
             setCategoryList(items);
           }, []);
@@ -1014,17 +1014,17 @@ describe('Menu', () => {
             <App/>,
             div
         );
-
-        const menu = document.querySelector('.next-menu');
-        assert(menu.querySelectorAll('li.next-menu-item').length === 52);
-        assert(menu.querySelectorAll('li.next-menu-item.next-menu-more').length === 2);
-        assert(menu.querySelectorAll('li.menuitem-overflowed').length > 1);
-
-        ReactDOM.unmountComponentAtNode(div);
-        document.body.removeChild(div);
+        setTimeout(() => {
+            const menu = document.querySelector('.next-menu');
+            assert(menu.querySelectorAll('li.next-menu-item').length === 52);
+            assert(menu.querySelectorAll('li.next-menu-item.next-menu-more').length === 2);
+            assert(menu.querySelectorAll('li.menuitem-overflowed').length > 1);
+            ReactDOM.unmountComponentAtNode(div);
+            document.body.removeChild(div);
+            done();
+        }, 9000);
     });
-
-
+
 
     it('should support hozInLine with header&footer in hoz', () => {
         const div = document.createElement('div');

diff --git a/components/menu/view/menu.jsx b/components/menu/view/menu.jsx
@@ -488,10 +488,9 @@ class Menu extends Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (prevState.lastVisibleIndex !== this.state.lastVisibleIndex) {
-            this.adjustChildrenWidth();
-        }
-        if (!isEqual(this.props.children, prevProps.children)) {
+        if ( prevState.lastVisibleIndex !== this.state.lastVisibleIndex 
+             || ( React.Children.toArray(this.props.children).length !==  React.Children.toArray(prevProps.children).length) 
+        ) {
             this.adjustChildrenWidth();
         }
     }