键入 '{ 数据： 受邀用户[];“”： 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 componenttype 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

从最高的组件删除：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

最高分量：

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;

导出的数据类型：

  firstName: string;

  lastName: string;

  createdOn: string;

  username: string;

  updatedOn: string;

  id: string;

  invitedState: string;

  invitedBy: {

    name: string;

    avatar: string;

    id: string;

    username: string;

  }

};```