为什么迭代ES6 Map不会在ReactJS中创建任何子元素？

Question

我正在尝试创建一个表React组件,它将数据和标题作为道具.我遇到了一个问题,我无法得到forEachMap 的方法,不会创建必要的子元素.

列的输入prop如下所示:

let cols = {
  payment: 'Payment',
  date: 'Processing Date',
  amount: 'Amount',
  payee: 'Payee'
};

这是我的React表组件的一个方法,它生成标题元素:

generateTableHead() {
  let columnsMap = new Map((Object.entries(this.props.columns)));
  let i = 0;
  return (
    <tr>
      {columnsMap.forEach((columnValue) =>
        <th key={i++}>
          {columnValue}
        </th>
      )}
    </tr>
  );
}

问题是<th>孩子不存在于被<tr>返回的对象中; 我得到了一个emtpy <tr></tr>.

但是,如果我使用Array.prototype.map,则<th>可以正确创建子元素WILl.

generateTableHead() {
  let columnsArray = Object.entries(this.props.columns);
  return (
    <tr>
      {columnsArray.map((column, index) =>
        <th key={index}>{column[1]}</th>
      )}
    </tr>
  );
}

我更喜欢第一个版本,因为代码稍微有点理解,因为我将在Map对象中引用键和值,而不是在第二个版本中使用数组索引.

我确信这有一个非常简单的解释,或者我做了一个非常简单的错误,我无法发现.如果有人能指出问题,我将非常感激!

Answer 1

这是因为forEach()不会返回任何东西,不像map()或reduce().

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control

forEach()为每个数组元素执行一次回调函数; 与map()或reduce()不同,它总是返回undefined值并且不可链接.典型的用例是在链的末尾执行副作用.