Javascript/Typescript - 不能 map 把所有东西都放到一张桌子上

Question

What I find most interesting is that {users.username} works, same with {users.profile.avatar} and even {users.profile.bio} but not what I need most of all: {users.emails.verified} and {users.emails.address}

I'm guessing that it has to do with the mapping of the data? Perhaps it's how I'm trying to call it? I tried {users['emails']['address']} as well.. but it doesn't work either. yet it works for {users['profile']['bio']} which makes it a bit bigger of a headache for me. Any help would be awesome, I'm all ears as to learning how to go about this!

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;

Answer 1

Well, I guess I could mark this question answered!

Another reason to define my types properly:

Ah. Just noticed the console log in the image, emails seems to be an array of email objects and not an object. so instead of {user.emails.verified} you should have {user.emails[0],verified}. same goes for address, Also, you may want to check if emails actually contains something and/or if it contains more than one email object – ibrahim mahrir

So for my specific use case: {user.emails[0].address} was what I was looking for as well as {String(user.emails[0].verified)} for returning boolean values!