如何解决如何在反应中为对象使用 map/for-each?
我在下拉组件中使用 for-each 函数。 dropDwonItemArray
是一个带有键和值的对象。当我记录时,它如下所示
我需要在下拉列表中执行的是遍历此对象并将值作为 DropDownItems 传递。我用于 -each。虽然它控制台.记录了值,但该值不会传递给 DropDownItem。你能解释一下这是什么原因吗?
DropDown.js
import React from 'react';
import { PropTypes } from 'prop-types';
import {
DropdownToggle,DropdownMenu,UncontrolledDropdown,DropdownItem
} from 'reactstrap';
import * as Icon from 'react-bootstrap-icons';
import './DropDown.scss';
/**
* This is a reusable dropdown
* onClick function and dropdown items come as props
*/
class DropDown extends React.Component {
render() {
const { dropDwonItemArray,text,onClick } = this.props;
const dropdownItems = Object.entries(dropDwonItemArray).forEach(
([key,value]) => {
return (
<DropdownItem>
<div className="dropdown-items" onClick={onClick}>
{value}
{console.log('Test',value)}
</div>
</DropdownItem>
);
}
);
return (
<div>
<UncontrolledDropdown className="dropdown-wrapper text p4">
<DropdownToggle className="select-dropdown">
<div className="select-text text p4">{text}</div>
<Icon.CaretDownFill />
</DropdownToggle>
<DropdownMenu name="test">{dropdownItems}</DropdownMenu>
</UncontrolledDropdown>
</div>
);
}
}
DropDown.propTypes = {
text: PropTypes.string,onClick: PropTypes.func,menuItemArray: PropTypes.array
};
export default DropDown;
解决方法
您需要使用 map
而不是 forEach
。
数组上的 forEach
方法对每个数组元素执行操作但不返回值。
另一方面,map
方法将数组中的每个元素映射到另一个值。
这是为了将对象值映射到组件数组中要使用的。
,Array.prototype.forEach 不返回值。 你应该使用 Array.prototype.map((value) => {}).
' ' * 30
,
用map代替forEach,一般我们用forEach做迭代而不是做mapping。遵循以下代码段。
import React from 'react';
import { PropTypes } from 'prop-types';
import { DropdownToggle,DropdownMenu,UncontrolledDropdown,DropdownItem} from 'reactstrap';
import * as Icon from 'react-bootstrap-icons';
import './DropDown.scss';
/**
* This is a reusable dropdown
* onClick function and dropdown items come as props
*/
class DropDown extends React.Component {
render() {
const { dropDwonItemArray,text,onClick } = this.props;
const dropdownItems = Object.entries(dropDwonItemArray).map( // here use
//map instead of forEach
([key,value]) => {
return (
<DropdownItem>
<div className="dropdown-items" onClick={onClick}>
{value}
{console.log('Test',value)}
</div>
</DropdownItem>
);
}
);
return (
<div>
<UncontrolledDropdown className="dropdown-wrapper text p4">
<DropdownToggle className="select-dropdown">
<div className="select-text text p4">{text}</div>
<Icon.CaretDownFill />
</DropdownToggle>
<DropdownMenu name="test">{dropdownItems}</DropdownMenu>
</UncontrolledDropdown>
</div>
);
}}
DropDown.propTypes = {
text: PropTypes.string,onClick: PropTypes.func,menuItemArray: PropTypes.array
};
export default DropDown;
按照此 link 进一步了解 map 和 forEach。
希望它能解决您的问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。