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

【问题标题】：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</>
看看我的答案，它应该可以解决问题 - stackoverflow.com/a/61557412/9792594 - 如果你能提供你的状态（对象数组）会很棒，我不得不猜测。

标签： javascript arrays reactjs mapping setstate

【解决方案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 会很好。

【讨论】：