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

Question

我在我的下拉组件中使用了 for-each 函数。 dropDwonItemArray 作为带有键的对象出现， value.When 我记录它如下所示

我需要在下拉列表中做的是遍历此对象并将值作为 DropDownItems.I 传递给 -each.Though 它 console.logs 值，值不' 传递给 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;

Answer 1

您需要使用 map 而不是 forEach。

数组上的 forEach 方法对每个数组元素执行操作，但不 return 值。

另一方面，map 方法将数组中的每个元素映射到另一个值。

这就是您想要将对象值映射到组件数组中的方法。

Answer 2

Array.prototype.forEach 没有 return 值。你应该使用 Array.prototype.map((value) => {}).

const dropdownItems = Object.entries(dropDwonItemArray).map(
  ([key,value]) => {
    return (
      <DropdownItem key={key}>
        <div className="dropdown-items" onClick={onClick}>
          {value}
          {console.log('Test', value)}
        </div>
      </DropdownItem>
    );
  }
);

Answer 3

用map代替forEach，一般我们用forEach来迭代而不是映射。按照下面的代码片段。

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;

关注此以更深入地了解 map 和 forEach。

希望能解决您的问题

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

How to use map/for-each for an object in react?

javascript

foreach

key-value

reactjs

dropdown