使用forEach遍历JavaScript Map并获取键值，组件无返回值求助

嘿，我之前也踩过这个坑！问题的核心在于你用了forEach来遍历数组，而不是map。

为什么forEach不行？ #

forEach的作用只是遍历数组执行回调函数，它不会返回任何值（准确说返回undefined）。所以你的renderRow方法最终返回的是undefined，React自然不会渲染任何<Row>元素。虽然控制台能打印出值，说明遍历逻辑确实执行了，但返回值不符合React渲染的要求。

用map替代forEach就解决了 #

map会遍历数组，并且把每个元素经过回调处理后，返回一个新的元素数组。这个数组正是React可以直接渲染的子元素集合。

修改后的代码如下：

renderRow() {
  const { Row, Cell } = Table;
  // 把forEach换成map，map会返回包含<Row>的数组
  return this.props.registeredAccountsToCostMap.map((mapEntry, index) => {
    console.log(mapEntry[0], ' ', mapEntry[1], ' ', index);
    return (
      <Row key={mapEntry[0]}>
        <Cell>{mapEntry[0]}</Cell>
        <Cell>{mapEntry[1]}</Cell>
      </Row>
    )
  })
}

额外优化：如果是原生Map对象的话 #

如果registeredAccountsToCostMap是原生的Map对象（不是数组），你需要先把它转换成键值对数组，用Array.from()就行，还可以用解构让代码更清晰：

renderRow() {
  const { Row, Cell } = Table;
  // 将Map转换为键值对数组
  const accountCostPairs = Array.from(this.props.registeredAccountsToCostMap);
  
  return accountCostPairs.map(([account, cost], index) => {
    console.log(account, ' ', cost, ' ', index);
    return (
      <Row key={account}>
        <Cell>{account}</Cell>
        <Cell>{cost}</Cell>
      </Row>
    )
  })
}

这样修改后，你的<Row>元素应该就能正常渲染啦！

内容的提问来源于stack exchange，提问作者Bill