为什么遍历 ES6 Map 不会在 ReactJS 中创建任何 children 元素？

Question

我正在尝试创建一个 table React 组件，它将数据和标题作为道具。我运行遇到了一个问题，我无法获得 Map 的 forEach 方法将无法创建必要的 children 元素。

列的输入属性如下所示：

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

这是我的 React table 组件生成标题元素的方法：

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> children 在返回的 <tr> object 中不存在；我得到一个空 <tr></tr>.

但是，如果我使用 Array.prototype.map，children <th> 元素将被正确创建。

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

我更喜欢第一个版本，因为代码更容易理解，因为我将在 Map object 中引用键和值，而不是在第二个版本中使用数组索引。

我确定对此有一个非常简单的解释，或者我犯了一个我无法发现的非常简单的错误。如果有人能指出问题所在，我将不胜感激！

Answer 1

这是因为 forEach() 没有 return 任何东西，不像 map() 或 reduce()。

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

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.

Answer 2

原因是，forEach 不会 return 任何东西 ，它只是用来迭代 array 元素，但 map 使用return array 的每个条目都有一些东西。如果你想使用 forEach 你可以用这种方式使用，只需使用一个变量来存储 ui 项目并使用 forEach 迭代数组并将项目推入该变量，之后只是 return 带有所有 td 的 tr，像这样：

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

检查此代码段以了解 map 和 forEach 之间的区别：

let a = [1,2,3,4,5];

let b = a.map(e => e + 1); //it will return e + 1;

let c = a.forEach(e => e + 1);   //it will not return anything

console.log('b', b);

console.log('c', c);

Answer 3

即使在第二个版本中，您也不必依赖数组索引。您可以使用 Object.values 而不是 Object.entries。

generateTableHead() {
  let columnsValues= Object.values(this.props.columns);
  let i = 0;
  return (
    <tr>
      {columnsValues.map((columnsValue) =>
        <th key={i++}>{columnsValue}</th>
      )}
    </tr>
  );
}

为什么遍历 ES6 Map 不会在 ReactJS 中创建任何 children 元素？

Why does iterating through an ES6 Map not create any children elements in ReactJS?

javascript

reactjs

ecmascript-6

react-jsx