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没有效果。

如果您想获取一个对象并根据其属性use .map()返回<td>的列表。

换句话说，使用<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>
    )
  }
}

Answer 2

map（与forEach相反）将项目作为数组返回，然后可以呈现。

同样，Object.entries()返回对象的键/值对作为数组。但是，您似乎只需要Object.values()，因此除非必要，否则您可以简化代码：

class InventoryView extends React.Component {
  getTableBodyAsReactElement() {
    let inv = [{'upc': 123}, {'upc': 454}];
    
    return (!inv) ? null : ( 
      <tbody> 
      {
        inv.map(item => {          
          return (
            <tr> 
            {
              Object.values(item).map(value => {
                return (<td>{value}</td>)
              })
            } 
            </tr>
          );
        })
      }
      </tbody>
    );
  }
  render() {
    return (<table>{this.getTableBodyAsReactElement()}</table>)
  }
}
ReactDOM.render(<InventoryView />, document.body );

table{ border:1px solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

2 个答案: