reactjs - antd子菜单“TypeError:无法读取未定义的属性'isRootMenu'”

我使用antd 3.15和GraphQL来获取数据并在Menu内部生成SubMenu和Menu.Item的列表。但是，我收到了这样的错误消息，例如Uncaught TypeError: Cannot read property 'isRootMenu' of undefined我不知道我的代码有什么问题。 isRootMenu不是文档上任何地方列出的道具。 ant.design/components/menu/#header并且当我对所有SubMenu和Menu.List进行硬编码时，没有问题。我可以迭代GraphQL中的数据以生成SubMenu和Menu.List吗？

有人可以帮我解决这个问题吗？谢谢！这是我的代码：

import * as React from 'react';
import './SideNav.scss';
import { Menu, Icon } from 'antd';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const FLOORS_QUERY = gql`
  query {
    getAllFloors {
      id
      floorName
      rooms {
        id
        roomName
        roomNumber
        roomDescription
      }
    }
  }
`;

export default class SideNav extends React.Component {
  render() {
    return (
      <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
        <Query query={FLOORS_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <h4> loading... </h4>;
            if (error) console.log(error);
            console.log(data);
            return (
              <React.Fragment>
                {data.getAllFloors.map((floor) => (
                  <SubMenu
                    key={floor.id}
                    title={
                      <span>
                        <Icon type="plus" />
                        <span>{floor.floorName}</span>
                      </span>
                    }
                  >
                    <React.Fragment>
                      {floor.rooms.map((room) => (
                        <Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
                      ))}
                    </React.Fragment>
                  </SubMenu>
                ))}
              </React.Fragment>
            );
          }}
        </Query>
      </Menu>
    );
  }
}

最佳答案

尝试添加<div>作为Menu的子级时遇到了这个问题。我只添加了一个空Menu.Item作为菜单的第一个孩子，错误消失了。

<Menu>
  <Menu.Item style={{display: 'none'}} />
  <div>...</div>
</Menu>