reactjs - 여러 배열의 중첩 배열이있는 다차원 객체가 있으며 한 번에 모든 것을 통해 매핑하려고하지만 어떻게 해야할지 잘 모르겠습니다

당신은 단순히 사용할 수 있습니다 forEach 다음과 같이 이해하기가 훨씬 쉬울 것이라고 생각합니다.

https://codesandbox.io/s/clever-euclid-1bdl5

export const ContactsGrid = (props: Props) => {
  const { contacts } = props;
  const rows = [];
  contacts.contactGroups.forEach(contactGroup => {
    //First row for group name
    const groupRow = (
      <tr>
        <td>{contactGroup.contactGroup}</td>
      </tr>
    );
    // Data for that group
    const contactRows = [];
    contactGroup.contacts.forEach(contact => {
      const row = (
        <tr>
          <td>{contact.fullName}</td>
          <td>{contact.member}</td>
          <td>
            {contact.phoneNumbers.map(number => (
              <div>
                {number.type} : {number.telephoneNumber}
              </div>
            ))}
          </td>
          <td>{contact.email}</td>
          <td>
            {contact.addresses.map(add => (
              <div>
                {add.addressLine1}
                <br /> {add.addressLine2} <br /> {add.city}, {add.state}
                <br />
                {add.zipCode}
              </div>
            ))}
          </td>
        </tr>
      );
      contactRows.push(row);
    });
    // Add the group row and all the data rows to final rows arr to be rendered
    rows.push(groupRow, ...contactRows);
  });
  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>
  );
};

도움이 되었기를 바랍니다 !

다른 접근법

https://codesandbox.io/s/suspicious-leaf-ozwu1?fontsize=14&hidenavigation=1&theme=dark

interface Row {
  name: string;
  memberOf: string;
  memberType: string;
  telephones: Array<PhoneNumber>;
  email: string;
  addresses: Array<Address>;
}
export const ContactsGrid = (props: Props) => {
  const { contacts } = props;
  let rows: Array<Row> = [];
  contacts.contactGroups.forEach(contactG => {
    contactG.contacts.forEach(contact => {
      rows.push({
        name: contact.fullName,
        memberOf: contactG.contactGroup,
        memberType: contact.member,
        telephones: contact.phoneNumbers,
        email: contact.email,
        addresses: contact.addresses
      });
    });
  });
  return (
    <table>
      <thead>
        <tr>
          <td>Name</td>
          <td>Member Type</td>
          <td>Telephone</td>
          <td>Email</td>
          <td>Address</td>
        </tr>
      </thead>
      <tbody>
        {rows.map(row => {
          return (
            <tr>
              <td>{row.name}</td>
              <td>{row.memberType + " (" + row.memberOf + ")"}</td>
              <td>
                {row.telephones.map(phone => {
                  return <p>{phone.telephoneNumber}</p>;
                })}
              </td>
              <td>{row.email}</td>
              <td>
                {row.addresses.map(address => {
                  return <p>{address.addressLine1 + ", " + address.city}</p>;
                })}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};