Карта в React JSX вызывает ошибку Uncaught Invariant Violation

Question

У меня есть компонент, который отображает панировочные сухари:

import * as React from 'react';
import {Breadcrumb} from 'antd';
import {BreadcrumbItem} from '../../models/BreadcrumbItem';

  interface Props {
    trail: BreadcrumbItem[]
  }

class Breadcrumbs extends React.Component<Props> {
    render() {

        console.log('this.props.trail is ', this.props.trail);

        return (
            <>
                {this.props.trail && (
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <a href="">Home</a>
                        </Breadcrumb.Item>
                        {this.props.trail.map((t: BreadcrumbItem) => {
                            return <Breadcrumb.Item>
                                    <a href={t.address}>{t.name}</a>
                                </Breadcrumb.Item>
                        })};
                    </Breadcrumb>
                )}
            </>
        );
    }

}


export {Breadcrumbs};

Breadcrumb и Breadcrumb.Item являются Компоненты Ant Design

BreadcrumbItem - моя собственная модель определяется как:

export interface BreadcrumbItem {
    name: string;
    address: string;
  }

И в родительском компоненте:

let breadcrumbTrail: BreadcrumbItem[] = [];

const breadcrumbItem : BreadcrumbItem = {
  name: 'Orders',
  address: '/orders'
};

breadcrumbTrail.push(breadcrumbItem);

....

return (
   <>
     <Breadcrumbs trail={breadcrumbTrail} />
   </>
);

Но я получаю сообщение об ошибке:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Если я закомментирую map() в компоненте «Панировочные сухари», ошибка исчезает, и отображаются хлебные крошки.

РЕДАКТИРОВАТЬ

В соответствии с предложением @Muhammad Zeeshan, я теперь wxporting использую default:

import * as React from 'react';
import {Breadcrumb} from 'antd';
import {BreadcrumbItem} from '../../models/BreadcrumbItem';

interface Props {
    trail: BreadcrumbItem[]
}

class Breadcrumbs extends React.Component<Props> {
    render() {

        console.log('this.props.trail is ', this.props.trail);

        return (
            <>
                {this.props.trail && (
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <a href="">Home</a>
                        </Breadcrumb.Item>
                        {this.props.trail.map((t: BreadcrumbItem) => {
                            return <Breadcrumb.Item>
                                    <a href={t.address}>{t.name}</a>
                                </Breadcrumb.Item>
                        })};
                    </Breadcrumb>
                )}
            </>
        );
    }

}


export default Breadcrumbs;

и импортирую:

import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';

Но получаю ошибку:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Наряду с предупреждением:

index.js:1 Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children

Снова, когда я закомментирую карту (), она работает и отображает ....

Answer 1

Вам необходимо изменить экспортную выписку с:

export {Breadcrumbs};

на

export default Breadcrumbs;