Menu#4640

components/menu/__tests__/index-spec.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React,{useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -978,6 +978,54 @@ describe('Menu', () => {
         document.body.removeChild(div);
     });
 
+    it('should show renderMore when hozInLine & async load more items ', () => {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        const items = [];
+        for (let i = 0; i < 50; i++) {
+          items.push(i);
+        }
+        function App() {
+          const [categoryList, setCategoryList] = useState(items);
+          useEffect(() => {
+            setCategoryList(items);
+          }, []);
+
+          return (
+            <Menu
+              hozInLine
+              direction="hoz"
+              triggerType="hover"
+              mode="popup"
+              popupAutoWidth
+            >
+              {categoryList.map((index, v) => (
+                <SubMenu label="Sub Nav" key={index}>
+                  <Item key="sub-12">Sub option 1</Item>
+                  <Item key="sub-22">Sub option 2</Item>
+                </SubMenu>
+              ))}
+            </Menu>
+          );
+        }
+
+        ReactDOM.render(
+            <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);
+    });
+
+
+
     it('should support hozInLine with header&footer in hoz', () => {
         const div = document.createElement('div');
         document.body.appendChild(div);

components/menu/view/menu.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import SubMenu from './sub-menu';
+import isEqual from 'lodash.isequal';
 import ConfigProvider from '../../config-provider';
 import { func, obj, dom, events, KEYCODE } from '../../util';
 import { getWidth, normalizeToArray, isSibling, isAncestor, isAvailablePos, getFirstAvaliablelChildKey } from './util';
@@ -57,7 +58,7 @@ const addIndicators = ({ children, lastVisibleIndex, prefix, renderMore }) => {
         }
         let overflowedItems = [];
 
-        if (index > lastVisibleIndex) {
+        if (index >= lastVisibleIndex) {
             child = React.cloneElement(child, {
                 // 别折叠不显示的 item，不占用真实的用户传入的 key
                 key: `more-${index}`,
@@ -479,7 +480,6 @@ class Menu extends Component {
 
     componentDidMount() {
         this.menuNode = findDOMNode(this);
-
         this.adjustChildrenWidth();
 
         if (this.props.hozInLine) {
@@ -491,13 +491,17 @@ class Menu extends Component {
         if (prevState.lastVisibleIndex !== this.state.lastVisibleIndex) {
             this.adjustChildrenWidth();
         }
+        if (!isEqual(this.props.children, prevProps.children)) {
+            this.adjustChildrenWidth();
+        }
     }
 
     componentWillUnmount() {
         events.off(window, 'resize', this.adjustChildrenWidth);
     }
 
     adjustChildrenWidth() {
+
         const { direction, prefix, header, footer, hozInLine } = this.props;
         if (direction !== 'hoz' || !hozInLine) {
             return;
@@ -511,6 +515,7 @@ class Menu extends Component {
             spaceWidth;
 
         if (header || footer) {
+
             children = this.menuContent.children;
             spaceWidth = getWidth(this.menuNode) - getWidth(this.menuHeader) - getWidth(this.menuFooter);
         } else {