arrayer - Javascript/Typescript - Kan inte mappa allt till en tabell

Det jag finner mest intressant är att {users.username} fungerar, likaså {users.profile.avatar} och till och med {users.profile.bio} men inte det jag behöver mest av allt: {users.emails.verified} och {users.emails.address}

Jag antar att det har att göra med kartläggningen av datan? Kanske är det så jag försöker kalla på det? Jag försökte också {users['emails']['address']}... men det fungerar inte heller. Ändå fungerar det för {users['profile']['bio']} vilket gör det till en lite större huvudvärk för mig. Någon hjälp vore fantastiskt, jag är helt öppen för att lära mig hur man går tillväga med detta!

import React from 'react';
import { Redirect } from 'react-router-dom';

import Avatar from '@atlaskit/avatar';
import DropdownMenu, {
  DropdownItemGroup,
  DropdownItem,
} from '@atlaskit/dropdown-menu';
import Tag, { TagColor } from '@atlaskit/tag';
import DynamicTable from '@atlaskit/dynamic-table'
import PageHeader from '@atlaskit/page-header';

import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

import Button, { ButtonGroup } from '@atlaskit/button';

const GET_USERS = gql`
  query getUsers {
      getUsers {
        id
        username
        isAdmin
        emails {
          address
          verified
        }
        profile {
          bio
          avatar
        }
      }
      getUser {
        id
      }
    }
`;

const Users = () => {

  const actionsContent = (
    <ButtonGroup>
      <Button appearance="primary">Search Box Here Here</Button>
    </ButtonGroup>
  );

  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  if (!data.getUser) {
    return <Redirect to="/login" />;
  }

  const createHead = (withWidth: boolean) => {
    return {
      cells: [
        {
          key: 'avatar',
          content: 'Avatar',
          isSortable: false,
          width: withWidth ? 2 : undefined,
        },
        {
          key: 'username',
          content: 'Username',
          isSortable: true,
          width: withWidth ? 18 : undefined,
        },
        {
          key: 'email',
          content: 'Email',
          shouldTruncate: true,
          isSortable: true,
        },
        {
          key: 'tags',
          content: 'Tags',
        },
        {
          key: 'action',
          content: 'Action',
          shouldTruncate: true,
          width: withWidth ? 2 : undefined,
        },
      ],
    };
  };
  
  const head = createHead(true);

  var users = data.getUsers;
  
  console.log(users)

  for(let i = 0, l = users.length; i < l; i++) {

    var rows = users.map((user: any) => ({
      cells: [
        {
          key: 'avatar',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ marginRight: 8 }}>
                <Avatar
                  name={user.username}
                  size="small"
                  src={user.profile.avatar}
                />
              </div>
            </span>
          ),
        },
        {
          key: 'user',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              {user.emails.address}
              {user.emails.verified}
            </span>
          ),
        },
        {
          key: 'email',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              {user.isAdmin}
              <Tag text="Verified" color="greyLight" />      
            </span>
          ),
        },
        {
          key: 'tags',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              {user.isAdmin}
              <Tag text="Admin" color="grey" />      
            </span>
          ),
        },
        { 
          key: 'lols',
          content: (
            <Button>More</Button>
          ), 
        },
      ],
    }))

  }
  return (
    <div>
      <PageHeader 
        actions={actionsContent}
      >        
        Users
      </PageHeader> 

      <DynamicTable
        head={head}
        rows={rows}
        isLoading={false}
        defaultSortOrder="ASC"
        loadingSpinnerSize="large"
      />  

    </div>
  );
}

export default Users;

Svar #1

Tja, jag antar att jag kan markera den här frågan som besvarad!

En annan anledning att definiera mina typer på rätt sätt:

Ah! Jag märkte precis konsolloggen i bilden. emails verkar vara en array av email-objekt och inte ett objekt, så istället för {user.emails.verified} borde du ha {user.emails[0].verified}, samma gäller för address. Du kanske också vill kolla om emails faktiskt innehåller något och/eller om det innehåller mer än ett email-objekt - ibrahim mahrir

Så för mitt specifika användningsfall: {user.emails[0].address} var vad jag letade efter liksom {String(user.emails[0].verified)} för att returnera booleska värden!