Question

我正在尝试创建一个表格React组件，它将数据和标题作为道具。我遇到了一个问题，我无法让Map的forEach方法无法创建必要的子元素。

列的输入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>个元素。

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值并且不可链接。典型的用例是在链的末尾执行副作用。

Answer 2

即使在第二个版本中，您也不必依赖于数组索引。您可以使用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中创建任何子元素？

2 个答案: