arrays - Javascript/Typescript - Kan ikke mappe alt til en tabell

Det jeg finner mest interessant er at {users.username} fungerer, det samme med {users.profile.avatar} og til og med {users.profile.bio}, men ikke det jeg trenger aller mest: {users.emails.verified} og {users.emails.address}

Jeg antar at det har å gjøre med kartleggingen av dataene? Kanskje det er måten jeg prøver å kalle det på? Jeg prøvde {users['emails']['address']} også.. men det fungerer heller ikke. Likevel fungerer det for {users['profile']['bio']}, noe som gjør det litt mer frustrerende for meg. All hjelp hadde vært fantastisk, jeg er helt åpen for å lære hvordan jeg skal gå frem med dette!

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

Vel, jeg antar at jeg kunne markere dette spørsmålet som besvart!

En annen grunn til å definere typene mine korrekt:

Ah! La nettopp merke til konsollloggen i bildet. emails ser ut til å være en liste med e-postobjekter og ikke et objekt, så i stedet for {user.emails.verified} bør du ha {user.emails[0].verified}, det samme gjelder for adresse. Du vil kanskje også sjekke om emails faktisk inneholder noe og/eller om den inneholder mer enn ett e-postobjekt - ibrahim mahrir

Så for mitt spesifikke bruksområde: {user.emails[0].address} var det jeg lette etter, så vel som {String(user.emails[0].verified)} for å returnere boolske verdier!