[英]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.