antd SubMenu "Ошибка типа: невозможно прочитать свойство isRootMenu из неопределенного" - PullRequest
Новая
       15

antd SubMenu "Ошибка типа: невозможно прочитать свойство isRootMenu из неопределенного"

2 голосов
/ 14 марта 2019

Я использую antd 3.15 и GraphQL для извлечения данных и генерирования списка SubMenu и Menu.Item внутри Menu. Тем не менее, я получил сообщение об ошибке, подобное этому 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>
    );
  }
}

Ответы [ 3 ]

0 голосов
/ 01 апреля 2019

Мне удалось заставить его работать, поместив компонент <Query> вверху: 

<Query query={FLOORS_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <Spin />;
            if (error) console.log(error);
            console.log(data);
            return (
              <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
                {data.getAllFloors.map((floor) => (
                  <SubMenu
                    key={floor.id}
                    title={
                      <Link to="/{floor.id}">
                        <span>
                          <Icon type="plus" />
                          <span>{floor.floorName}</span>
                        </span>
                      </Link>
                    }
                  >
                    {floor.rooms.map((room) => (
                      <Menu.Item key={room.id} onClick={this.showRoomProfile}>
                        {room.roomNumber}
                      </Menu.Item>
                    ))}
                  </SubMenu>
                ))}
              </Menu>
            );
          }}
        </Query>
0 голосов
/ 20 апреля 2019

У меня была эта проблема при попытке добавить <div> в качестве дочернего элемента Menu.Я просто добавил пустой Menu.Item в качестве первого потомка моего меню, и ошибка исчезла.

<Menu>
  <Menu.Item style={{display: 'none'}} />
  <div>...</div>
</Menu>
0 голосов
/ 30 марта 2019

Я столкнулся с той же проблемой. Кажется, Antd не позволяет помещать произвольные компоненты в Menu/SubMenu. Я предполагаю, что Menu.Item нужно получить некоторые реквизиты, которые передаются от Menu/SubMenu его дочерним элементам.

Таким образом, вы можете создать пользовательский компонент, который пропускает все подпорки, или удалить внутреннюю <React.Fragment> декларацию (ту, которая находится внутри SubMenu), которая в любом случае не нужна.

...