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

Question

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

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

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

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

编辑 从答案和评论中获得一些建议后，我将地图更改为以下内容：

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

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

原文由 Luke Sharon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

所以我猜这个输入：

 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>

原文由 Alex L 发布，翻译遵循 CC BY-SA 4.0 许可协议