Реагировать |Items.map не является функцией

Question

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

Uncaught TypeError: items.map is not a function
    at IconDropdown.react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement.react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement (index.jsx:29)

Вот код, к которому относится эта ошибка:

{isOpen ? (
              <div className="dropdown-menu">
                {items.map(item => ( // Specifically this map
                  <button
                    type="button"
                    {...getItemProps({ item })}
                    key={item}
                    className="dropdown-item"
                  >
                    <Icon icon={item.icon} /> {item.name}
                  </button>
                ))}
              </div>
            ) : null}

И я использую его в своемКомпонент основного экрана, подобный следующему:

 items = {
  editUser: {
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },
  changePassword: {
    name: 'Change Password',
    icon: 'lock'
  },
  deleteUsed: {
    name: 'Delete user',
    icon: 'trash-o'
  }
};

render() {
 return (
  <IconDropdown items={this.items} />
)}

Ожидаемое поведение: Отображение списка пунктов меню с соответствующими им значками.

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

Я могу опубликовать весь компонент, если хотите, просто дайте мне знать.

ОБНОВЛЕНИЕ, Весь раскрывающийся компонент:

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import Downshift from 'downshift';

import Icon from 'lenses/common/components/Icon';

import './styles.scss';

const IconDropdown = ({ items, ...otherProps }) => (
  <Fragment>
    <Downshift {...otherProps}>
      {({ getItemProps, isOpen, toggleMenu }) => (
        <div>
          <div className="btn-group">
            <button
              id="my-select"
              type="button"
              className="btn btn-primary dropdown-toggle dropdown-toggle-split"
              onClick={toggleMenu}
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded={isOpen}
            >
              <span className="sr-only">Toggle Dropdown</span>
            </button>
            {isOpen ? (
              <div className="dropdown-menu">
                {items.map(item => (
                  <button
                    type="button"
                    {...getItemProps({ item })}
                    key={item}
                    className="dropdown-item"
                  >
                    <Icon icon={item.icon} /> {item.name}
                  </button>
                ))}
              </div>
            ) : null}
          </div>
        </div>
      )}
    </Downshift>
  </Fragment>
);

IconDropdown.propTypes = {
  items: PropTypes.shape({
    name: PropTypes.string.isRequired,
    icon: PropTypes.string
  })
};

export default IconDropdown;

Answer 1

.map не существует из объекта {}, оно существует только из массива [].Вы можете:

• Изменить свой объект на массив
• Использовать Object.keys(items).map(...)
• Использовать lodash.map

Answer 2

items не является массивом.Проверьте сообщение о том, как отобразить объект здесь

Другое решение - объявить элементы в виде массива:

items = [
  {
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },
  {
    name: 'Change Password',
    icon: 'lock'
  },
  {
    name: 'Delete user',
    icon: 'trash-o'
  }
];

Answer 3

Ваша итерация на object должна быть array Просто поменяй

items = {
  editUser: {
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },
  changePassword: {
    name: 'Change Password',
    icon: 'lock'
  },
  deleteUsed: {
    name: 'Delete user',
    icon: 'trash-o'
  }
};

TO

items = [{
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },{
    name: 'Change Password',
    icon: 'lock'
  },{
    name: 'Delete user',
    icon: 'trash-o'
  }
];

Или вы можете использовать items.enteries.map для перебора объекта

Answer 4

Попробуйте поставить Object.keys(objectname) перед массивом map.

Для работы функции map необходим массив, с Object.keys(objectname) вы преобразуете объект {} в действительный массив [] длякарта.

Object.keys(items).map(item => ...