输入'{数据：InvitedUser[]; ““： 任何; }' 不可分配给类型 'Element'

Question

I'm having a typescript issue that i need some assistance with if possible.

I have a parent component that passes in an array of results through to a child component that I will then map to display the info.

Parent Component:

import { Table } from 'semantic-ui-react';
import { InvitedUser } from '../common/types/userInvitations';
import EmptyUserInvitesTable from './EmptyUserInvitesTable';
import UserInvitesTable from './UserInvitesTable';

// Type that sets up the prop types for props passed into
// the component
type UserInvitationsProps = {
  data: Array<InvitedUser>;
};

// Class which contains the User Signup form and keeps the values in state, ready to be sent to the API.
class UserInvitations extends Component<
UserInvitationsProps
> {
  render(): JSX.Element {
    const { data } = this.props;

    let showData = false;

    if (data) {
      showData = true;
    }

    return (
      <div className="row settings-column">
        <div className="userInvitesWidth">
          <div className="row form-title align-column">
            <Table striped>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell />
                  <Table.HeaderCell>Invitee</Table.HeaderCell>
                  <Table.HeaderCell>Email Address</Table.HeaderCell>
                  <Table.HeaderCell>Invited By</Table.HeaderCell>
                  <Table.HeaderCell>Email Address</Table.HeaderCell>
                  <Table.HeaderCell>Date Invited</Table.HeaderCell>
                  <Table.HeaderCell>Date Joined</Table.HeaderCell>
                  <Table.HeaderCell>Actions</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              {showData
                ? (
                  <EmptyUserInvitesTable />
                )
                : (
                  <UserInvitesTable data={data}/>
                )}
            </Table>
          </div>
        </div>
      </div>
    );
  }
}

export default UserInvitations;

Child Component:

import { Table, Image, Button } from 'semantic-ui-react';
import { InvitedUser } from '../common/types/userInvitations';
import styled from 'styled-components';

const SendEmailButton = styled(Button)`
  width: 72px;
  height: 36px;
  border-radius: 18px;
  border: solid 1px #4c4cdc;
  background-color: #ffffff;
  color: #4a4a4a;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
`;

// Type that sets up the prop types for props passed into
// the component
type UserInvitationTableProps = {
  data: Array<InvitedUser>;
};

class UserInvitationsTable extends Component<
UserInvitationTableProps
> {
  render(): JSX.Element {
    const { data } = this.props;

    return (
      {data.map((dataset: any) => (
        <Table.Body>
          <Table.Row key={dataset.id}>
            <Table.Cell>
              <Image src={dataset.invitedBy.avatar} rounded size="mini" />
            </Table.Cell>
            {dataset.firstName && dataset.lastName
              ? (
                <Table.Cell>
                  {dataset.firstName}
                  {dataset.lastName}
                </Table.Cell>
              )
              : (
                <Table.Cell>N/A</Table.Cell>
              )}
            <Table.Cell>{dataset.username}</Table.Cell>
            <Table.Cell>{dataset.invitedBy.name}</Table.Cell>
            <Table.Cell>{dataset.invitedBy.username}</Table.Cell>
            <Table.Cell>{dataset.createdOn}</Table.Cell>
            {dataset.invitedState === 'ARCHIVED'
              ? (
                <Table.Cell>{dataset.updatedOn}</Table.Cell>
              )
              : (
                <Table.Cell>N/A</Table.Cell>
              )}
            {dataset.invitedState === 'PENDING_USER_ACCEPTATION'
              ? (
                <Table.Cell>
                  <SendEmailButton
                      className="sumBtn"
                      // onClick={(e) => this.onStart(e, range)} need to work out what the button does from igor
                      // disabled={disabled}
                      // loading={startLoading} TBC
                    >
                    Start
                  </SendEmailButton>
                </Table.Cell>
              )
              : (
                <Table.Cell>No Actions</Table.Cell>
              )}
          </Table.Row>
        </Table.Body>
    ))}
  )}
}

export default UserInvitationsTable;

I'm getting the error

Type '{ data: InvitedUser[]; "": any; }' is not assignable to type 'Element'.

But not sure why. Any help would be appreciated.

Thanks

Answer 1

From highest component remove : ReactNode

const CUserInvitations: React.FC<{}> = (): JSX.Element => (
  <Query query={INVITED_USERS}>
    {({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {
      if (loading) {
        return null;
      }

      if (!data) return null;

      return <UserInvitations data={data} />;
    }}
  </Query>
);

Answer 2

Highest Component:

import { Query, QueryResult } from 'react-apollo';
import UserInvitations from '../components/userInvitations/UserInvitations';
import { InvitedUser } from '../components/common/types/userInvitations';
import { INVITED_USERS } from '../components/common/Queries';

/**
 * the container for the user invitations
 * renders the expense page wrapped by a query.
 */
const CUserInvitations: React.FC<{}> = (): JSX.Element => (
  <Query query={INVITED_USERS}>
    {({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {
      if (loading) {
        return null;
      }

      if (!data) return null;

      return <UserInvitations data={data} />;
    }}
  </Query>
);

export default CUserInvitations;

Exported type for data:

  firstName: string;
  lastName: string;
  createdOn: string;
  username: string;
  updatedOn: string;
  id: string;
  invitedState: string;
  invitedBy: {
    name: string;
    avatar: string;
    id: string;
    username: string;
  }
};```