Question

我无法解决嵌套对象和数组的渲染问题。如何遍历对象并呈现此数据？

我正在调用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

Answer 1

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

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

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

正确命名此名称将大大有助于您进行设计。 orderData中的每个项目是什么？（它是订单类型数组）。是按...订购吗？

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

ordersBySomething中的每一行都是一个对象数组。因此，您可能会对此进行映射，并为每个对象返回一个组件。

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

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

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

编程主要是正确地命名数据结构，然后进行一些编码以转换它们。名称清楚时，编程就很明显。例如：

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

Answer 2

您首先必须确定想要渲染对象的方式。我建议打开MS Paint或类似程序并绘制您想要的UI外观。从这里开始，我建议创建一个React组件，以呈现列表中的单个对象。然后您的map()调用将只使用JSX标签呈现该组件。

如何在JSX中呈现嵌套对象和数组？

2 个答案: