javascript - 如何在 react 中显示表格中的对象数组

Question

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

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

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

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

编辑从答案和评论中听取了一些建议后，我将 map 更改为以下内容:

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

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

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

我使用了一个函数式组件，但它与基于类的组件非常相似。

注意:您还可以创建一个行组件，然后通过状态数组在 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>