小编Cli*_*hau的帖子

我正在尝试创建一个表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对象中引用键和值,而不是在第二个版本中使用数组索引.

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