如何在反应中显示表格中的对象数组

最近在学习react。我将状态设置为对象数组。我想在页面上的表格中显示该数组（每个对象在一行上）。我一直在研究地图，但是我在理解它时遇到了一些困难。我能够在代码中的不同位置很好地使用映射来映射array，但我在通过映射时遇到问题对象数组。此代码发生在我的渲染内的 div 中：

<table>
  {this.state.orderDetails.map((item =>
  <tr key={item}>{item}</tr>
  ))}
</table>

我收到此错误：“未处理的拒绝（错误）：对象作为 React 子项无效（找到：带有键 {OrderID、CustomerID、AddressID、Date、ItemID、BookID、UnitPrice、Quantity} 的对象）”。如果您打算渲染子集合，请改用数组。

订单详细信息肯定已正确设置；当我打开反应工具并检查该组件中的状态时，它被列为一个包含两个元素的数组，每个元素都是一个包含多个元素的对象。如何成功地映射这个对象数组并以表格形式显示它（每个对象都在自己的行上）？感谢您提供任何想法！

EDIT在听取了答案和评论的一些建议后，我将地图更改为以下内容：

<table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.CustomerID}</td></tr>
  ))}
</table>

错误已经消失。但是，当我单击该按钮时，我会看到一个空的小表格单元格。我期望有多个单元格，因为我的数组有两个对象，当然我期望它不为空。另外，我想要显示的不仅仅是 customerID。我想要在表格上呈现的每个对象中有几个元素（例如数量、价格、标题等）。还有其他建议吗？

我们不知道你的对象数组是什么样的，所以我们必须猜测：

所以我猜这个输入：

const initState = [
    { id: 1, name: "bread", quantitiy: 50 },
    { id: 2, name: "milk", quantitiy: 20 },
    { id: 3, name: "water", quantitiy: 10 }
  ];

我得到这个输出：

它是完全灵活的，所以如果我们有输入：

const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];

然后我们得到这个输出：

最重要的是映射映射到状态数组的映射内的对象值：

{state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}

下面和 codePen 上的完整演示：https://codepen.io/Alexander9111/pen/zYvEbML

我使用了一个功能组件，但它与基于类的组件非常相似。

注意：您还可以创建一个行组件，然后通过状态数组在地图内调用该组件。在此行组件内，您将像我一样映射对象键并输出表数据元素。这是组件死亡（即将所有内容分解为彼此嵌套的越来越小的组件）和过于复杂的更少组件之间的平衡。

function MyTable() {
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];
  const [state, setState] = React.useState(initState);

  return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable />, document.getElementById("target"));

th,
td {
  border: 1px solid black;
  margin: 0px 0px;
  padding: 5px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="target"></div>