logo标签列表

如何在React中用表格显示一个对象数组

javascriptarraysreactjsmappingsetstate
3

最近我一直在学习React。我将我的状态设置为对象数组。我希望在页面上以表格形式显示该数组（每个对象占据其中一行）。我一直在研究map方法，但是我有点难以理解它的用法。我在代码的另一个地方使用map方法来映射数组，但是我在映射对象数组时遇到了问题。以下代码位于我渲染的div内部：

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

我遇到了这个错误：'Unhandled Rejection (Error): Objects are not valid as a React child (found: object with keys {OrderID, CustomerID, AddressID, Date, ItemID, BookID, UnitPrice, Quantity}). If you meant to render a collection of children, use an array instead.'（未处理的拒绝（错误）：对象不适用作React子元素（找到具有键{OrderID，CustomerID，AddressID，Date，ItemID，BookID，UnitPrice，Quantity}的对象）。如果您想呈现一组子元素，请改用数组。）
订单详细信息已经被正确设置；当我打开我的React工具并检查此组件中的状态时，它被列为一个具有两个元素的数组，每个元素都是一个带有多个元素的对象。如何成功地遍历此对象数组并以表格形式显示它（将每个对象放在自己的行上）？感谢任何想法！事先感谢！
编辑： 在参考答案和评论后，我已更改我的映射如下：
<table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.CustomerID}</td></tr>
  ))}
</table>

错误已经消失。但是，当我点击按钮时，我只收到一个空的小表格单元格。我期望会有多个单元格，因为我的数组有两个对象；当然，我也希望它不是空的。此外，我想显示的不仅仅是客户ID。每个对象中都有几个我想在表格上呈现的元素（例如数量、价格、标题等）。还有其他建议吗？
你的对象结构是什么？尝试输出名称或其他显示属性 <tr key={item.id}>{item.name}</tr>。 - SpiritOfDragon
当映射对象数组时，每个对象都会传递给 item。要访问对象的内容，可以使用 item.property，其中 property 是您想要访问的属性。在您的情况下，我认为应该是类似于 <tr key={item.OrderID}>{item.Quantity}</tr> 这样的东西 - 这将打印每一行的数量属性和 OrderID 作为键。 - Akshay
尝试执行以下代码：<tr key={item.id}><OrderRow order={item} /></tr> 并创建一个名为 Order 的组件：function Order({order})=><><td>{order.name}...其他列</> - HMR
看一下我的答案，它应该能解决问题 - https://dev59.com/Tbroa4cB1Zd3GeqPp7qw#61557412 - 如果您能提供您的状态（对象数组），那就太好了，因为我不得不猜测。 - Alex L
4个回答
8
我们不知道你的对象数组长什么样子，所以我们只能猜测：
我猜测这是你的输入内容：
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" }
  ];

然后我们会得到这个输出:

enter image description here

最重要的是在映射state数组的同时，对对象值进行映射:

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

完整演示请参见codePen: https://codepen.io/Alexander9111/pen/zYvEbML

我使用了一个函数组件，但是使用类组件也非常相似。

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

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>

0

对象不是React的有效子元素

这意味着您传递了一个对象，而不是React可以反序列化的内容；例如字符串或数字。

首先，您必须传递给key={}一个唯一的内容（不是数组索引）。itemID会很好。

0

item是数组中的一个对象。因此，该对象将具有键和值。您需要检索它们并显示。

例如，假设数组如下：

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

然后在 map 中，您需要执行：
<table>
  {this.state.orderDetails.map((item =>
  <tr key={item.OrderID}>{item.CustomerID}</tr>
  ))}
</table>
我进行了这个调整。错误消失了，但页面上没有表格呈现。有什么建议吗？ - Luke Sharon
0
你可以这样做，
 <table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.UnitPrice}</td></tr>
  ))}
</table>
我进行了这个调整。错误消失了，但页面上没有表格呈现。有什么建议吗？ - Luke Sharon
首先，请检查您在 this.state.orderDetails 中获取到了什么。 - Sohan Patil
我正在获取一个包含两个对象的数组。 - Luke Sharon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接