Компонент дизайна Antd Avatar.Group выдает ошибку

В настоящее время пытаюсь использовать Avatar.Group в React (https://ant.design/components/avatar/).

В нем указано, что у меня есть версия Antd 4.5.2 (4.5.0+ для функций avatar.group) для моего package.json.

Я получаю такую ​​ошибку:

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Кто-нибудь знает, как это решить?

Я уже импортировал библиотеку Avatar, а также множество других библиотек:

import { Avatar, Button .....} from 'antd';

Прямо сейчас в JSX я тестирую показанный пример:

    <Avatar.Group>
      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>

Обратите внимание, что даже когда у меня нет ничего промежуточного

  <Avatar.Group> </Avatar.Group>

дает ту же ошибку

Файлы Package.lock.json и package.json:

https://justpaste.it/8m3zz


reactjs frontend antd ant-design-pro avatar
person food monsta    schedule 10.08.2020    source источник
comment
Не могли бы вы показать более подробную информацию?   -  person Winky    schedule 10.08.2020
comment
Да, код, в который вы импортируете компонент Avatar, был бы неплохим. Проверьте, импортируете ли вы его так: import { Avatar } from 'antd'   -  person Nicolas Hevia    schedule 10.08.2020
comment
Извините, все, что я обновил, мои попытки   -  person food monsta    schedule 10.08.2020
comment
Не могли бы вы показать свой package.json и проверить свой package.lock.json (или yarn.lock) на наличие версии antd? Похоже, вы используете старую версию Antd, которая не экспортирует Avatar.Group   -  person Bambou    schedule 10.08.2020
comment
Спасибо, что ответили - действительно вам всем. Я обновил свой package.json + package.lock json. Он ДЕЙСТВИТЕЛЬНО выглядит так, как будто он не устарел (но был бы признателен за быстрый взгляд). Мне было любопытно, знаете ли вы, как я могу соответствующим образом обновить package.lock json?   -  person food monsta    schedule 10.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Это классическая ошибка, когда вы неправильно импортируете компонент.

Из того, что вы показали, нет ошибки в компоненте, использующем Avatar, и нет проблем с компонентом Avatar и / или самой библиотекой antd.

Итак, если вы получаете эту ошибку после внедрения этого нового компонента, я бы проверил, как вы его импортируете.

Допустим, вы работаете над компонентом под названием UserAvatar

import React from "react";
import { Avatar, Tooltip } from "antd";
import { UserOutlined, AntDesignOutlined } from "@ant-design/icons";

const UserAvatar = (_) => {
  return (
    <Avatar.Group>
      (...)
    </Avatar.Group>
  );
};

export default UserAvatar;

Теперь предположим, что вы импортируете этот компонент из App.js

import { Comp } from "./Comp";

Поскольку компонент экспортируется по умолчанию, вы должны использовать:

import Comp from "./Comp";

Есть много предположений о том, как вы на самом деле импортируете / экспортируете компоненты por. Это может быть даже другой несвязанный компонент. Но поскольку у меня нет полного исходного кода и я получал эту ошибку много раз раньше, я бы рекомендовал воспользоваться советом, который я дал вам выше, чтобы проверить, как вы импортируете свои пользовательские компоненты.

person Nicolas Hevia    schedule 10.08.2020
comment
Я понимаю, о чем вы говорите, и видел несколько ответов на другие запросы по аналогичным вопросам. Я специально рассматриваю использование компонента Avatar.Group - напрямую путем импорта компонента Avatar. Судя по документации, мне кажется, что все, что мне сейчас нужно сделать, это импортировать компонент Avatar: импортировать {Avatar} из antd. На данный момент кажется, что package-lock.json не обновлен, я предполагаю, или какая-то часть не обновлена. Если бы вы могли подсказать, как я могу его обновить, я был бы очень признателен! - person food monsta; 10.08.2020
comment
Разве вы уже не импортируете это? Я бы не стал проверять antd, но подробнее о том, как вы импортируете другие вещи. Попытайтесь изолировать свою ошибку. Вот песочница для воспроизведения ошибки. Также попробуйте полностью удалить Avatar и использовать пустой div. Что происходит? - person Nicolas Hevia; 10.08.2020
comment
Спасибо за это - мне удалось заставить его работать. Николас огромное тебе спасибо. я очень ценю это - person food monsta; 11.08.2020