反应 | Items.map 不是函数答案

【问题标题】：React | Items.map is not a function反应 | Items.map 不是函数
【发布时间】：2019-08-03 20:17:55
【问题描述】：

我正在使用 Downshift，以便创建一个显示一些菜单选项的下拉菜单。我用 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;

【问题讨论】：

从猜测我不得不说，也许你的意思是props.items.map，但如果没有看到组件，我无法确定。
用组件更新了描述..

标签： javascript reactjs ecmascript-6 downshift

【解决方案1】：

.map 不存在于对象{} 中，它仅存在于数组[] 中。你可以：

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

【讨论】：

【解决方案2】：

尝试将Object.keys(objectname) 放在数组映射之前。

地图功能需要一个数组才能工作，使用Object.keys(objectname)，您将把一个对象{}转换为一个有效的数组[]用于地图。

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

【讨论】：

【解决方案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'
  }
};

到

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

或者你可以使用items.enteries.map 来迭代对象

【讨论】：

【解决方案4】：

items 不是数组。查看关于如何映射对象here的帖子

另一种解决方案是将项目声明为数组：

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

【讨论】：