javascript - 如何使用 React 从对象列表创建表格？

Question

我以类似的方式创建表头(1 行)，只需要一个循环。在这里，我有两个嵌套的循环。

import { Component } from 'react';
import ReactDOM from 'react-dom';

class InventoryView extends Component {
  getTableBodyAsReactElement() {
    let inv = [{'upc': 123}, {'upc': 454}];
    console.log('inv: ', inv);

    return (!inv) ? null : (
      <tbody>
        {inv.forEach((item) => {
          console.log('item: ', item);
          return(
            <tr>
              {Object.entries(item).forEach((field) => {
                console.log('field: ', field);
                return <td>{field[1]}</td>
              })}
            </tr>
          );
        })}
      </tbody>
    );
  }

  render() {
    return(
      <table>
        {this.getTableBodyAsReactElement()}
      </table>
    )
  }
}

ReactDOM.render(
  <InventoryView />,
  mountNode
);

当我打印它时，看起来所有预期的数据都在那里。预期的行为是 123 和 454 在浏览器中的同一列中显示。

Answer 1

.forEach() does not return any value (它返回 undefined )。那些return s 无效。

如果你想得到一个对象并返回<td>的列表s 基于其属性，use .map() .

换句话说，将对象转换为 <td>使用.map()而不是 .forEach() :

class InventoryView extends Component {
  getTableBodyAsReactElement() {
    let inv = [{ 'upc': 123 }, { 'upc': 454 }];
    console.log('inv: ', inv);

    return (!inv) ? null : (
      <tbody>
        {inv.map((item) => {                                // changed here
          console.log('item: ', item);
          return (
            <tr>
              {Object.entries(item).map((field) => {        // changed here
                console.log('field: ', field);
                return <td>{field[1]}</td>
              })}
            </tr>
          );
        })}
      </tbody>
    );
  }

  render() {
    return (
      <table border="1">
        {this.getTableBodyAsReactElement()}
      </table>
    )
  }
}