[英]React | Items.map is not a function
我正在使用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} />
)}
预期的行为:呈现菜单项及其相应图标的列表。
当前行为:我收到上述错误。 我不确定这段代码有什么问题。 在我看来,这是正确的。
如果您愿意,我可以发布整个组件,请告诉我。
UPDATE,整个下拉组件:
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
不存在于对象{}
,而仅存在于数组[]
。 您可以:
Object.keys(items).map(...)
lodash.map
您在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
遍历对象
items
不是数组。 在此处查看有关如何通过对象映射的帖子
另一种解决方案是将项目声明为数组:
items = [
{
name: 'Edit Info',
icon: 'pencil-square-o'
},
{
name: 'Change Password',
icon: 'lock'
},
{
name: 'Delete user',
icon: 'trash-o'
}
];
尝试在数组映射之前放置Object.keys(objectname)
。
Map函数需要一个数组来工作,使用Object.keys(objectname)
,您可以将对象{}
转换为有效的map数组[]
。
Object.keys(items).map(item => ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.