键入 '{ 数据： 受邀用户[];“”： any; }'不可分配给类型“元素”

Question

    我有一个打字脚本问题，如果可能的话，我需要一些帮助。

我有一个父组件，它将一组结果传递到一个子组件，然后我将映射该子组件以显示信息。

父组件：

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>

    );

  }

}

Answer 1

从最高的组件删除：ReactNodeconst CUserInvitations: React.FC<{}> = (): JSX.Element => (&nbsp; <Query query={INVITED_USERS}>&nbsp; &nbsp; {({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {&nbsp; &nbsp; &nbsp; if (loading) {&nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (!data) return null;&nbsp; &nbsp; &nbsp; return <UserInvitations data={data} />;&nbsp; &nbsp; }}&nbsp; </Query>);

Answer 2

最高分量：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';/**&nbsp;* the container for the user invitations&nbsp;* renders the expense page wrapped by a query.&nbsp;*/const CUserInvitations: React.FC<{}> = (): JSX.Element => (&nbsp; <Query query={INVITED_USERS}>&nbsp; &nbsp; {({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {&nbsp; &nbsp; &nbsp; if (loading) {&nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (!data) return null;&nbsp; &nbsp; &nbsp; return <UserInvitations data={data} />;&nbsp; &nbsp; }}&nbsp; </Query>);export default CUserInvitations;导出的数据类型：&nbsp; firstName: string;&nbsp; lastName: string;&nbsp; createdOn: string;&nbsp; username: string;&nbsp; updatedOn: string;&nbsp; id: string;&nbsp; invitedState: string;&nbsp; invitedBy: {&nbsp; &nbsp; name: string;&nbsp; &nbsp; avatar: string;&nbsp; &nbsp; id: string;&nbsp; &nbsp; username: string;&nbsp; }};```