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

Posted 2023-02-22

【中文标题】如何在反应中显示表格中的对象数组

【英文标题】：How to display an array of objects in a table in react

【发布时间】：2020-08-16 18:02:01

【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

你的对象结构是什么？尝试输出名称或其他显示属性<tr key=item.id>item.name</tr>

映射对象数组时，每个对象都传递给item。要访问对象的内容，您可以使用item.property，其中property 是您要访问的属性。在您的情况下，我认为它类似于<tr key=item.OrderID>item.Quantity</tr>

尝试做：<tr key=item.id><OrderRow order=item /></tr> 并创建一个订单组件：function Order(order)=><><td>order.name...other columns</>

看看我的答案，它应该可以解决问题 - ***.com/a/61557412/9792594 - 如果你能提供你的状态（对象数组）会很棒，我不得不猜测。

【参考方案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>

【参考方案2】：

item 是数组中的一个对象。所以这个对象将有键和值。您需要检索这些并显示

例如假设数组是这样的

orderDetails=[
  OrderID:1,
  CustomerID:'someName'
]

然后在地图中你需要做的

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

【讨论】：

我做了这个调整。错误消失了，但页面上没有表格呈现。有什么建议吗？

【参考方案3】：

你可以这样做，

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

【讨论】：

我做了这个调整。错误消失了，但页面上没有表格呈现。有什么建议吗？

首先请检查你在this.state.orderDetails得到了什么

我得到一个包含两个对象的数组。

【参考方案4】：

对象作为 React 子对象无效

这意味着你传递了一个 Object 而不是 React 可以反序列化的东西；例如字符串或数字。

首先，您必须向 key= 传递唯一的东西（不是数组索引）。 itemID 会很好。