Недопустимый тип элемента React

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

 import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import { InsertDriveFileOutlinedIcon } from '@material-ui/icons/InsertDriveFileOutlined';

<Grid item>
  <List>
    {policiesProcedures.map((doc, index) => (
      <ListItem button key={index}>
        <ListItemIcon>
          <InsertDriveFileOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary={doc.name} />
      </ListItem>
    ))}
  </List>
</Grid>;
  

Этот код выдает ошибку

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

Если я изменю его из списка на что-то другое, например

или он работает нормально.

Есть какие-либо подсказки, что здесь происходит не так?

Спасибо

Комментарии:

1. Можете ли вы показать свои инструкции по импорту?

2. обновлено в вопросе

3. куда вы импортируете InsertDriveFileOutlinedIcon

Ответ №1:

Я подозреваю, что у вас неправильный оператор импорта. Если это экспорт по умолчанию, то ваш экспорт должен выглядеть следующим образом

 import InsertDriveFileOutlinedIcon  from '../containers/InsertDriveFileOutlinedIcon'
  

Однако, если это не экспорт по умолчанию, вы должны его уничтожить.

 import {InsertDriveFileOutlinedIcon}  from '../containers/InsertDriveFileOutlinedIcon'