如何在React中显示表中的对象数组 [英] How to display an array of objects in a table in react

问题描述

我最近正在学习反应.我将状态设置为对象数组.我想在页面上的表中显示该数组(每个对象一行).我一直在研究地图，但是在理解地图时遇到了一些麻烦.我可以在代码的其他位置使用map来通过数组进行映射，但是在通过对象数组进行映射时遇到了麻烦.这段代码发生在我的渲染器内的div中:

I have recently been learning react. I set my state to an array of objects. I want to display that array in a table on the page (each object on one line). I have been researching map, however I'm having a bit of trouble understanding it. I was able to use map just fine at a different place in my code to map through an array, but I am having trouble mapping through an array of objects. This code takes place in the div inside my render:

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

我收到此错误:'未处理的拒绝(错误):对象作为React子对象无效(找到:带有键{OrderID，CustomerID，AddressID，Date，ItemID，BookID，UnitPrice，Quantity}的对象).如果要渲染子级集合，请改用数组.'

I am getting this error: '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工具并检查该组件中的状态时，它被列为包含两个元素的数组，每个元素都是其中包含多个元素的对象.如何成功映射此对象数组并以表格形式显示(每个对象都在其自己的行上)?感谢您提出任何建议！！！

Order details has definitely been set correctly; when I open my react tools and check the state in this component, it is listed as an array with two elements, each element being an object with multiple elements within. How can I successfully map through this array of objects and display it in table form (with each object on its own row)? Thanks is advance for any ideas!!!

EDIT 在从答案和评论中获取一些建议后，我将地图更改为以下内容:

EDIT After taking some advice from the answers and comments, I have changed my map to the following:

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

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

The error has gone away. However, when I click the button, I get one tiny table cell that is empty. I would expect multiple cells since my array has two objects, and of course I would expect it not to be empty. Also, I am wanting to display more than just customerID. I have several elements in each object that I want to render on the table (ex. quantity, price, title, etc...). Any further sugesstions?

推荐答案

对象无效，不能作为React子对象

Objects are not valid as a React child

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

It means that you passed an Object instead of something that React can deserialize; string for example, or a number.

首先，您必须将唯一的内容(不是数组索引)传递给 key = {} . itemID 会很好.

First of all, you have to pass to key={} something that is unique (not an array index). itemID would be nice.

这篇关于如何在React中显示表中的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！