如何在反应中为对象使用 map/for-each？

编程问答 2022-05-23

问题描述

我在下拉组件中使用 for-each 函数。 dropDwonItemArray 是一个带有键和值的对象。当我记录时，它如下所示

enter image description here

我需要在下拉列表中执行的是遍历此对象并将值作为 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。

希望它能解决您的问题

dropdownforeachjavascriptkey-valuereactjsreactjs