试图将嵌套子数组的对象中的元素映射到HTML表中的单元格，不确定如何到达最深的子数组

Question

我有一个React/TypeScript组件，我正在构建这个组件，它提供了一个HTML表作为联系人详细信息。

我试图将API响应映射到表中的单元格中，并动态填充每个联系人的行及其详细信息。有两个电话号码和地址的数组嵌套在对象中，我不知道如何与其余的数据一起迭代。

一开始我尝试嵌套for循环，但是当我到达这两个元素时，我碰到了一个墙，因为它们在数据对象中的位置。

然后，我尝试在for循环中间使用.map()，但是我碰到了一个TypeScript错误，说明我试图映射的元素可能为null。

我考虑过分别迭代电话号码和地址数组，然后将它们插入到每个联系人的适当单元格中，但当我使用单独的for循环来填充其他单元时，我想不出该如何做。

预期产出：

Name | Member | Telephone | Email | Addresses

Ben B| Friend | 610-535-1234 | ben@gmail.com | 123 Fiction Drive,Denver
                215-674-6789                   234 Dreary Ln,Seattle 

Alice | Family| 267-333-1234 | ally@aim.com  | 437 Chance St, Pitts.

我制作了一个CodeSandbox，并删除了下面的当前组件和示例数据结构。对于CodeSandbox，它当前加载，但是一旦取消注释这些行，您就会看到错误

<td>{contacts.contactGroups[i].contacts[j].phoneNumbers}</td>

<td>{contacts.contactGroups[i].contacts[j].addresses}</td>

​

​

Current Component

import React from "react";
import { Contacts } from "./contact-types";

type Props = {
  contacts: Contacts;
};

export const ContactsGrid = (props: Props) => {

  const { contacts } = props;

  const rows = [];

  for (let i = 0; i < contacts.contactGroups.length; i++) {
    rows.push(
      <tr>
        <td>{contacts.contactGroups[i].contactGroup}</td>
      </tr>
    );
    for (let j = 0; j < contacts.contactGroups[i].contacts.length; j++) {
      rows.push(
        <tr>
          <td>{contacts.contactGroups[i].contacts[j].fullName}</td>
          <td>{contacts.contactGroups[i].contacts[j].member}</td>
          {/* <td>{contacts.contactGroups[i].contacts[j].phoneNumbers}</td> */}
          <td>{contacts.contactGroups[i].contacts[j].email}</td>
          {/* <td>{contacts.contactGroups[i].contacts[j].addresses}</td> */}
        </tr>
      );
    }
  }

  return (
    <table>
      <thead>
        <tr>
          <td>Name</td>
          <td>Member Type</td>
          <td>Telephone</td>
          <td>Email</td>
          <td>Address</td>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
};

Current Data Structure

export default {
  count: 1,
  contactGroups: [
    {
      contactGroup: "Family",
      count: 1,
      contacts: [
        {
          member: "Uncle",
          fullName: "BENJAMIN BILLIARDS",
          lastName: "BILLIARDS",
          firstName: "BENJAMIN",
          email: "shark@billiards.com",
          phoneNumbers: [
            {
              telephoneNumber: "123-456-7899",
              type: "mobile"
            },
            {
              telephoneNumber: "610-555-7625",
              type: "work"
            }
          ],
          addresses: [
            {
              addressLine1: "123 FAMILY ST",
              addressLine2: "APT 1208",
              city: "ATLANTA",
              state: "GEORGIA",
              zipCode: "12345"
            },
            {
              addressLine1: "456 WORKING BLVD",
              addressLine2: "",
              city: "ATLANTA",
              state: "GEORGIA",
              zipCode: "12345"
            }
          ]
        }
      ]
    },
    {
      contactGroup: "Friends",
      count: 1,
      contacts: [
        {
          member: "School Friend",
          fullName: "HANS ZIMMER",
          lastName: "ZIMMER",
          firstName: "HANS",
          email: "hans@pirates.com",
          phoneNumbers: [
            {
              telephoneNumber: "267-455-1234",
              type: "mobile"
            }
          ],
          addresses: [
            {
              addressLine1: "789 FRIEND ST",
              addressLine2: "",
              city: "SAN DIEGO",
              state: "CALIFORNIA",
              zipCode: "67890"
            },
            {
              addressLine1: "234 CANARY ST",
              addressLine2: "",
              city: "SEATTLE",
              state: "WASHINGTON",
              zipCode: "67890"
            }
          ]
        }
      ]
    }
  ]
};

Answer 1

使用嵌套map

const rows = contacts.contactGroups.map(group => <tr>
  <td>{group.contactGroup}</td>
  <td>
  <table>
    {group.contacts.map(contact => <tr>
      <td>{contact.fullName}
    </tr>}
  </table>
  </td>
</tr>;