反应| Items.map不是函数 [英] React | Items.map is not a function

问题描述

我正在使用Downshift，以创建显示某些菜单选项的下拉菜单.我用降档创建了一个可重用的React组件，但是现在出现了这个错误:

I am using Downshift, in order to create a dropdown that displays some menu options. I created a reusable React component with downshift, but now I get this error:

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)

以下是此错误所指的代码:

Here is the code this error refers to:

{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}

我正在这样在我的主屏幕组件中使用它:

And I am using it in my main Screen Component like this:

 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} />
)}

预期的行为: 呈现菜单项及其相应图标的列表.

Expected behavior: Render a list of menu items, with their corresponding icons.

当前行为: 我收到上述错误.我不确定这段代码有什么问题.在我看来，这是正确的.

Current Behavior: I get the above error. I am not sure what is wrong with this code. On my eyes this is correct.

如果您愿意，我可以发布整个组件.

I can post the entire component if you want, just let me know.

更新，整个下拉列表组件:

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;

推荐答案

.map在对象{}中不存在，仅在数组[]中存在.您可以:

.map doesn't exist from an object {}, it only exists from an array []. You can:

• 将对象更改为数组
• 使用Object.keys(items).map(...)
• 使用 lodash.map

• Change your object to an array
• Use Object.keys(items).map(...)
• Use lodash.map

这篇关于反应| Items.map不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！