如何使用 map 方法分离每个 object output - React.js

Question

我有这个代码结构：

[
  [
    { title: 'McRoyale', price: 70, count:5, totalPrice: 350 },
    { title: 'Big Mac', price: 55, count:1, totalPrice: 55 },
  ],
  [
    { title: 'Double Big Tasty', price: 99, count:2, totalPrice: 198 },
  ],
  [
    { title: 'Grand Chicken Premier', price: 72, count:3, totalPrice: 216 },
    { title: 'Spicy Chicken Fillet', price: 60, count:2, totalPrice: 120 },
  ]
]

三个数组 arrays - 可能多于或少于三个它是动态数字 - 这些 arrays 中的每一个都由 arrays 个对象组成

我写了这段代码：

<thead>
          <tr>
            <th scope='col'>Items</th>
            <th scope='col'>Total Items Price</th>
          </tr>
        </thead>
        <tbody>
          {cardItems.map((items) =>
            items.map((item) => (
              <tr>
                <td>
                  <b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{' '}
                  <b>Item Count:</b>
                  {item.count}, <b>Item Total Price:</b> {item.totalPrice}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table> 

我得到了这个 output：

但这不是我需要的 output，我需要每个内部数组都在一个而不是每个项目中，我想按对象将其分开，如下所示：

每个 object 排成一排。

Answer 1

尝试这个

 <tbody>
        {cardItems.map((items) => (
          <tr>
            <td>
              {items.map((item) => (
                <>
                  <b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{" "}
                  <b>Item Count:</b>
                  {item.count}, <b>Item Total Price:</b> {item.totalPrice}{" "}
                </>
              ))}
            </td>
          </tr>
        ))}
</tbody>