如何在 JSX 中渲染嵌套对象和数组？ [复制]答案

【问题标题】：How can I render nested objects and arrays in JSX? [duplicate]如何在 JSX 中渲染嵌套对象和数组？ [复制]
【发布时间】：2020-06-05 01:00:07
【问题描述】：

我在渲染嵌套对象和数组时遇到了麻烦。如何循环遍历我的对象并呈现这些数据？

我正在调用 API。这是钩子和 JSX。

const [orderData, setOrderData] = useState([]);

return (
    <>
      <div>
        <ul>
          {orderData.map(item => {
            console.log(item);
          })}
        </ul>
      </div>
    </>
  );

console.log(item) 返回六个对象。

这是六个对象。

第一项是带有对象数组的对象。其他五个对象包含对象。

如何渲染来自 JSX 中所有六个对象的数据？我希望能够访问每个对象的数据。我怎样才能遍历这些？

至于 UI：这并不重要。现在，我只想访问所有数据并将其呈现在 UL 中。

访问data.orders。

尝试访问data.orders.deadline，或data.orders.description

【问题讨论】：

结构是随机的还是已知第一个对象总是看起来像 X 而其他 5 个像 Y？
@Chris 其他五个对象与第二个 scr 快照中显示的第二个对象相同
您可以创建一个通用组件来接受一个道具作为数组并显示其中的列表项。对于 6 个对象中的每一个，通过传递一个数组来挂载组件，您可以使用 Object.keys / Object.values 将这些对象转换为数组
在你弄清楚如何渲染任何东西之前，你需要弄清楚你想要渲染的什么。具体来说，您需要哪些 UI 小部件以及您希望它们位于何处。

标签： javascript json reactjs api

【解决方案1】：

您首先必须决定要如何渲染对象。我建议打开 MS Paint 或类似程序并绘制您希望 UI 看起来的样子。从那里，我建议创建一个 React 组件来呈现列表中的单个对象。然后你的 map() 调用将只使用 JSX 标记呈现该组件。

【讨论】：

【解决方案2】：

const ordersBySomething = orderData.map(item => item.data.orders)

现在您有了一个包含订单数组元素的数组。每个订单都是一个对象。

ordersBySomething[0].forEach(console.log) // logs order objects

正确命名将大大有助于您设计它。 orderData中的每一项是什么？（它是订单数组类型）。是ordersBy...吗？

然后您需要映射订单对象数组。在 JSX 中你可能会渲染 - 什么，一行，一个表？

ordersBySomething 中的每一行都是一个对象数组。所以你可能会映射它并为每个对象返回一个组件。

例如，如果第一个数组是天数组，元素是当天的订单：

const ordersByWeek = orderData.map(item => item.data.orders)
const arrayOfRenderedOrders = ordersByWeek.map(day => day.map(orderData => renderOrderDataComponent(orderData))

现在您有一个每天包含一个元素的数组，并且在每个元素中您都有一个渲染订单数组。

编程主要是正确命名数据结构，然后进行一些编码来转换它们。当名称清晰时，编程是显而易见的。例如：

对于每一天，将当天的订单显示在表格中，每个订单在一行中。

【讨论】：

这几乎是我想出的。问题是运行这样的东西是行不通的。 console.log(orderBySomething.map(item => { return item.deadline; }) );
我可以通过 ordersBySomething 进行映射，但我无法访问 data.orders 中的数据——我收到一个错误
您需要显示代码和错误以获得帮助。我不是通灵你知道的！ :-P
如果你想看一下，我在帖子底部添加了一些屏幕截图
我更新了我的答案。如果您命名数据结构，您和我们都会更清楚。